適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
マウスが使えない状況でもサービスを利用できるよう、すべての機能がキーボードだけで操作できるようにする。
具体的な実装方法
2.1.1 A
1. ⭕️良い例
標準的なHTMLコントロールを使用する
<button>,<a>,<input>などの標準的なHTML要素は、デフォルトでキーボード操作に対応しています。
<a href="about.html">会社概要</a>
<button onclick="submitForm()">送信</button>カスタムコンポーネントにキーボード操作を実装する
<div>や<span>で作成したカスタムボタンには、tabindex="0"を追加してフォーカス可能にし、EnterキーやSpaceキーで操作できるようにJavaScriptを実装します。
<div role="button" tabindex="0" onclick="openDialog()" onkeydown="handleKeyDown(event)">
カスタムボタン
</div>
2. ❌悪い例
マウスイベントしか実装されていない
なぜ問題なのか
onclickイベントのみが実装されている場合、キーボードでフォーカスできてもEnterキーなどで有効化できません。また、onmouseover（マウスホバー）でしか表示されないメニューは、キーボード利用者がアクセスできません。
改善策
onclickと合わせてonkeydownイベントを実装し、EnterキーやSpaceキーを検知して同じ処理を実行します。ホバーで表示されるメニューは、フォーカスが当たった際にも表示されるようにonfocusイベントも実装します。
tabindexに1以上の数値を設定する
なぜ問題なのか
tabindexに1以上の値を設定すると、ページの自然なタブ順序を強制的に変更してしまい、ユーザーの混乱を招きます。
改善策
tabindexは、インタラクティブでない要素をフォーカス順序に追加するための0か、フォーカス対象から除外するための-1のみを使用します。タブ順序はソースコードの順序で制御します。
3. プラットフォーム別の実装
キーボード操作の基本:
- Tab: 次のフォーカス可能な要素へ移動
- Shift + Tab: 前のフォーカス可能な要素へ移動
- Enter: リンクやボタンを有効化
- Space: ボタンやチェックボックスなどを有効化
- 矢印キー: ラジオボタンのグループやメニュー内の項目を移動
- Esc: ダイアログやドロップダウンメニューを閉じる
4. 特殊なケースへの対応
特定のキーストロークのタイミングに依存する機能
- この達成基準は、キーを押す速さやタイミングが操作の成否に影響するような機能を実装しないことを求めています。ただし、これはキーボードショートカットなど、キーボード操作を補助する機能の実装を妨げるものではありません。
2.1.2A
1. ⭕️良い例
モーダルダイアログの実装
- ダイアログが開いている間は、Tabキーのフォーカスをダイアログ内に限定し（トラップさせ）、Escキーを押すことでダイアログを閉じ、フォーカスをダイアログを開いた元の場所に戻します。
埋め込みプラグイン（例：動画プレイヤー）
- プラグイン内でTabキーを使い切ったら、次のTabキー操作でプラグインの外にある次のインタラクティブ要素へフォーカスが移動するようにします。
2. ❌悪い例
Escキーで閉じられないモーダルダイアログ:
なぜ問題なのか
- ダイアログ内に「閉じる」ボタンしかなく、そのボタンにフォーカスを移動させるまでTabキーを何度も押さなければならない場合、非常に非効率です。もし何らかの理由でそのボタンにフォーカスが移動できなければ、完全なトラップが発生します。
改善策
- Escキーを押すことでダイアログが閉じる、という標準的なキーボード操作を実装します。
フォーカスをループさせるだけのコンポーネント:
なぜ問題なのか
- コンポーネント内でTabキーを押すと、そのコンポーネント内の要素を無限にループするだけで、外に抜け出す手段がない状態です。
改善策
- ループはさせず、コンポーネントの最後の要素からTabキーを押すと、ページ上の次の要素へフォーカスが移動するようにします。
3. プラットフォーム別の実装
キーボード操作の標準的な終了方法:
Escキー
- モーダル状態（ダイアログなど）を解除し、トラップ状態から抜けるための最も一般的なキーです。
Tabキー
- 非モーダルのコンポーネントの場合、Tabキーでコンポーネント内の要素を循環した後、次のTabキー操作でコンポーネントの外へフォーカスが移動できるようにします。
4. 特殊なケースへの対応
意図的にフォーカスを管理する場合
- モーダルダイアログのように、利用者の注意を特定のコンテンツに限定するために意図的にフォーカスを「トラップ」させることは許容されます。ただし、その場合でも、利用者がキーボード操作（通常はEscキー）でそのモードを簡単に解除し、トラップから抜け出せる手段が提供されていなければなりません。
確認観点
この達成基準の確認は、手動でのキーボード操作テストが中心となります。
2.1.1 A
1. 定量的な基準の担保
自動チェックツールでの合格
- ツールで完全に検出することは困難です。一部の静的な問題（例：
tabindexの不適切な使用）は検出できる場合があります。
チェックリストの達成度
2.定性的な基準の担保
レビュー
- JavaScriptでカスタムコンポーネントを実装している箇所を中心に、キーボードイベント（
onkeydownなど）が適切に処理されているか、またtabindexが正しく使用されているかをコードレビューで確認します。
専門家による監査
- 専門家が、実際にマウスを一切使わず、キーボードのみ（Tab, Shift+Tab, Enter, Space, 矢印キーなど）でサイトのすべての機能を試します。ドロップダウンメニュー、スライダー、カスタムウィジェットなど、特に複雑なコンポーネントがキーボードで直感的に操作できるかを重点的に評価します。
2.1.2A
1. 定量的な基準の担保
自動チェックツールでの合格
- ツールでキーボードトラップを確実に検出することは非常に困難です。実際の操作による手動テストが必須です。
チェックリストの達成度
2.定性的な基準の担保
レビュー
- JavaScriptでフォーカスを管理している箇所（特にモーダルダイアログや埋め込みコンテンツの周辺）のコードをレビューし、フォーカスをトラップさせるロジックと、それを解除するロジック（Escキーのイベントリスナーなど）が両方とも正しく実装されているかを確認します。
専門家による監査
- 専門家が、キーボードのみでサイト内をくまなくナビゲーションし、意図せずフォーカスが閉じ込められる箇所がないかを徹底的にテストします。特に、複雑なUIを持つコンポーネントや、外部から埋め込まれたコンテンツ（動画プレイヤー、SNSウィジェットなど）でトラップが発生しないかを重点的に評価します。