「クリックして」ダイアログを閉じるときのフォームの動作
ユーザーが選択したフィルターに基づいて作成されたグラフをユーザーが見ることができるWebサイトがあります。ページの上部には、いくつかのフィルタートピックがあり、クリックすると、その下の一種のダイアログを展開します（実際には、この目的のために、Bootstrapのドロップダウン要素をこの目的のために変形させています）。ここで、特定の選択（地域、性別など）を行うことができます。 。、および若干複雑なもの）。
ダイアログの下部に[OK]と[キャンセル]の2つのボタンがあります。[OK]をクリックすると、ダイアログが閉じ、フィルターラベルの下に選択内容の簡略版が表示されます。また、[キャンセル]をクリックすると、ダイアログが閉じて、元のフィルターの状態（つまり、「キャンセル」した最新の変更の前）に戻ります。次に、選択したフィルターの実装をトリガーしてグラフを変更するボタンがあります。
ただし、これらのダイアログのデフォルトの動作（および多くのユーザーがおそらく期待しているが、私は間違っている可能性があるもの）でも、「クリックオフ」（つまり、ダイアログボックス。
私たちが持っている質問は、この動作が「OK」または「キャンセル」をトリガーする必要があるかどうかです。または、この動作を完全に禁止し、ダイアログを閉じるためにボタンの1つを選択するように強制する必要があります。
次にダイアログを開いたときに、キャンセルをクリックしない限り、自分が行った選択が表示されると思っていました（一部のブラウザーでは、フォームに入力してからリンクをクリックすると、ページ、ただし、戻るボタンを使用すると、回答がまだ入力されていることがわかります）。同僚は、この動作によって何が入力されてもキャンセルされることを期待していました。私たちはこれに近すぎると思うので、フィードバックに感謝します。ありがとうございました。
この場合、慣習に固執するのが賢明です。モーダルの外側をクリックすると、キャンセルオプションと同じように動作します。この動作を有効にすると、他のWebサイトでこの原則に依存する人々を助け、それを決して使用しない人々に害を与えることはありません。
行動を促すフレーズに適切なラベルを付けるのは良いことです。OKとキャンセルはコンテキストに依存します。これらのアクションは、これらのアクションが理にかなう前にすべてを読むことをユーザーに強制します（それでも、クリック以外に何があるのか疑わしい場合があります）。
アクセシビリティに関して：このリンクには、それがどのように機能するかの例が含まれています。 そして、ここに デモ があります。これは、キーボードを使用してナビゲートするユーザーと、ウィンドウの外をクリックして物事を閉じることを好むユーザーの両方に役立ちます。それは非常にユーザーフレンドリーです。
「キャンセル」として機能します。キーボードフォーカスとクリック動作がモーダル内に閉じ込められている限り、その機能を無効にして完全に問題なく実行できます。 「OK」または「キャンセル」を選択するように強制します。特にアクセシビリティの理由から、焦点をロックすることが不可欠です。
以前の選択も覚えていません。 「キャンセル」という言葉は、私が何もしなかったかのように振る舞うことを意味します。
Webページについては、モーダルに関する WAI-ARIA Authoring Practices を参照してください。