ダイアログとキーボード：フォーカスジャーニーをテストする

このガイドが達成するのに役立つこと

• 適切なコンポーネントを選択する
• 理解しやすいフォーカスを配置する
• 閉じることを許可する
• コンテキストを復元する

クイックチェック

• モーダルは必要か？
• 開始時のフォーカスはどこに移動するか？
• 背景は実際に不活性か？
• キーボードでダイアログを閉じることができるか？
• トリガーが消えた場合、フォーカスはどこに戻るか？

手順

1. 1

   中断を選択する

   情報にモーダルが必要か、ページに残しておけるかを判断する。 モーダルダイアログ、パネル、メニューを分離する。 適切なネイティブ要素を優先し、動作を確認する。 ARIAロールは自動的にインタラクションを作成するわけではない。

   成果物：コンポーネントの選択と根拠

2. 2

   名前と開く

   アクセシブルな名前を、表示される見出しに関連付けます。 タスクに応じて、構造化コンテンツの先頭、有用なフィールド、または安全なアクションにフォーカスを適切に配置します。 開いたときに、先頭が画面外にスクロールされないようにします。

   成果物：テスト済みの開く機能

3. 3

   キーボードによるナビゲーション

   W3Cのモーダルダイアログパターンでは、TabキーとShift+Tabキーはコンテンツ内に留まり、外側のコンテンツは操作できません。 表示されるフォーカス、論理的な順序、ネストされたコントロールにトラップがないことを確認します。

   成果物：前方および後方ナビゲーション

4. 4

   閉じると復元

   表示される閉じる機能と、想定されるEscキーの動作を提供します。 トリガーが存在しない場合は、トリガーまたは論理的なステップにフォーカスを戻します。 送信後、ユーザーは変更内容と次に何が起こるかを把握できる必要があります。

   成果物：復元されたフォーカスとコンテキスト

5. 5

   エラーとスペースのテスト

   長いメッセージ、無効なフィールド、モバイルキーボード、ズーム機能を含める。 スクロールによってアクションや見出しが完全に隠れないようにする。 エラーメッセージは理解しやすく、入力値を失うことなくアクセス可能であること。

   成果物：狭画面でのエッジケース

6. 6

   ページ内でのチェック

   統合コンポーネントを、独立したデモだけでなく、キーボードと支援技術を使用してテストする。 繰り返し閉じた後の重複した開きとフォーカスを確認する。 ローカルでの承認だけではWCAG認証は得られない。

   成果物：承認記録と既知の制限事項

再利用可能なワークシート

承認された観察結果を記入してください。 これらのフィールドは作業用テンプレートであり、観察結果ではありません。

メカニズムの区別

管理指標

よくある間違い

• 不活性コンテンツなしでaria-modalを追加する
• クロージャ後にフォーカスを失う
• 明確な出口がないEscキーのブロック
• マウスのみのテスト 開く