モーダルのレビューは、ダイアログを開く前から始まる

保存済みプロジェクトの名前を変更するダイアログを考えてみましょう。キーボードで起動ボタンに移動し、操作します。ラベルが操作内容を表し、ダイアログには目的を示すアクセシブルな名前があるかを確認します。パネルの見た目が分かりやすくても、こうした関係が伝わらなければ理解しにくいことがあります。

最初に置くフォーカスは、内容に合わせましょう。短い名前変更ダイアログなら入力欄に置けますが、長いダイアログでは先に読み取り位置を示したほうがよいかもしれません。最初のボタンにフォーカスを置くのが常に適切だと決めつけないでください。

モーダルダイアログが開いている間、背後のコンテンツは操作できない状態にします。フォーカスを前後に移動し、隠れたページに移ってしまわず、モーダル内にとどまるか確認しましょう。

スクリーンショットでは、この動作を確認できません。ダイアログを閉じる方法が分かりやすいかも含め、実際に操作しましょう。実装の参考にはW3Cのダイアログパターンを使い、ページ全体の文脈で関係するアクセシビリティ要件を評価します。

プロジェクト名を空のまま送信してみましょう。ほかの有効な入力を失わずに、説明を見つけて該当の入力欄へ戻れますか？エラーでは必要な修正を説明します。赤い枠だけでは、何を直すべきか伝わりません。

削除など取り消しにくい操作では、ラベルを周囲の文脈と合わせて確認します。「プロジェクトを削除」は「確認」よりも内容が伝わります。文言、フォーカス位置、キャンセル方法のすべてで、警告色だけに頼らず慎重に判断できるようにしましょう。

名前変更ダイアログを閉じた後は、通常、起動したコントロールにフォーカスを戻します。操作によってそのコントロールやプロジェクト自体がなくなるなら、利用者が続けて作業できる適切な場所を選びましょう。ページの先頭へフォーカスを移すと、完了した操作の後で戸惑わせることがあります。

確認した操作の流れを記録しましょう。ダイアログを開く、移動する、無効な内容を送信する、修正する、完了する、元の画面へ戻る、という手順です。既定の見た目が正しいからアクセシブルだという大まかな主張ではなく、具体的な操作上の指摘を残せます。