適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
Tabキーで操作する際に、見た目の順序と一致した、論理的で自然な順序でフォーカスが移動するように実装する。
具体的な実装方法
2.4.3 A
1. ⭕️良い例
ソースコードの順序を視覚的な順序と一致させる
- HTMLのソースコードを、ページの視覚的な流れ（左から右、上から下）に沿って記述します。これが最もシンプルで確実な方法です。
<header>...</header>
<main>...</main>
<footer>...</footer>2. ❌悪い例
CSSで視覚的な位置を大幅に変更する
なぜ問題なのか
- CSSを使って、HTMLソースコード上では後方にある要素を、ページの先頭に表示させると、キーボードのフォーカスはソースコードの順に従うため、視覚的な流れとは全く異なる順序で移動してしまいます。
改善策
- まず、HTMLを論理的かつ視覚的な流れに沿って構築します。その上で、CSSによるレイアウト調整はその構造を維持する範囲で行います。
tabindexに正の整数（1以上）を設定する:
なぜ問題なのか
tabindex="1",tabindex="2"のように正の整数を設定すると、ページの自然なソースコード順を無視してフォーカス順序を強制的に変更してしまいます。これはメンテナンス性を著しく低下させ、予期せぬ動作の原因となります。
改善策
tabindexは、インタラクティブでない要素をフォーカス可能にするための0か、フォーカス対象から除外するための-1のみを使用します。順序はソースコードで管理します。
3. プラットフォーム別の実装
DOMの順序が基本
- キーボードによるフォーカス順序は、基本的にHTMLのDOM（Document Object Model）の順序に従います。
JavaScriptによるフォーカス管理
- ダイアログを開いた時など、JavaScriptで意図的にフォーカスを移動させる（
element.focus()）場合は、操作の流れが論理的になるように細心の注意を払います。例えば、ダイアログを閉じた後は、そのダイアログを開いた元のボタンにフォーカスを戻すべきです。
4. 特殊なケースへの対応
動的に表示されるコンテンツ
- コンテンツが動的に表示または非表示になる場合、フォーカスが適切に管理されていることを確認する必要があります。例えば、非表示の要素にフォーカスが移動してしまわないように注意します。
確認観点
この達成基準の確認は、手動でのキーボード操作テストが中心となります。
2.4.3 A
1. 定量的な基準の担保
自動チェックツールでの合格
- ツールが
tabindexの不適切な使用を検出することはできますが、フォーカス順序が「論理的」かどうかを判断することはできません。
チェックリストの達成度
2. 定性的な基準の担保
レビュー
- CSSで複雑なレイアウト（Flexboxの
orderプロパティやGrid Layoutなど）を実装している箇所や、tabindexを使用している箇所を重点的にレビューし、ソースコードの順序と視覚的な順序に乖離がないかを確認します。
専門家による監査
- 専門家が、実際にキーボードのみでサイト全体を操作し、フォーカスの移動が直感的で、操作の流れを妨げるような不自然な動きがないかを評価します。特に、モーダルダイアログの表示・非表示や、動的なコンテンツの更新に伴うフォーカスの遷移が論理的であるかを厳しくチェックします。