2.4.3 フォーカス順序

要件

キーボードで操作可能なインターフェースコンポーネントは、意味的・操作的に正しい順序でフォーカスを受け取るようにすること。

具体的な内容

• キーボード（主に Tab キー）を使ったときに、フォーカスが 視覚・構造上の意味に沿って自然に移動するように設計されている必要があります。
• 「見た目」と「フォーカス順」が一致していることが望ましい。

例

不適切なフォーカス順

<!-- 表示上は 左から右にボタンが並ぶが -->
<div>
  <button id="B">ボタンB</button> <!-- 2番目に表示 -->
  <button id="A">ボタンA</button> <!-- 1番目に表示 -->
</div>

キーボードでフォーカスすると「B → A」と逆順になってしまう。

適切なフォーカス順

<!-- ソースコードの順序と表示順を一致させる -->
<div>
  <button id="A">ボタンA</button>
  <button id="B">ボタンB</button>
</div>

見た目とフォーカスが一致し、操作性が良くなる。

修正・対応方法

• HTML構造を視覚的な並び順に合わせて記述する。
• JavaScriptで動的に表示順を変える場合でも、フォーカス順が破綻しないよう制御する。
• どうしても構造を変えられない場合は、tabindex 属性を明示的に使用して制御する。

チェックポイント

チェック項目	内容
Tabキーで操作できるか？	すべての操作要素にフォーカスが当たるか確認
フォーカス順は論理的か？	視覚的な並びと一致しているか確認
tabindexの使用は適切か？	不要な tabindex=”-1″ や tabindex=”999″ はないか
スクリーンリーダーで読み上げ順は自然か？	意味の流れが崩れていないか

利点

• キーボードユーザーや支援技術利用者でも快適に操作可能
• ナビゲーション性・操作性の向上
• 入力ミスや混乱の防止
• 開発段階でのQA品質の向上

まとめ

項目	内容
達成基準	2.4.3 フォーカス順序
レベル	A
対象	キーボード操作対象全般（リンク・ボタン・フォームなど）
要件	意味や操作の流れに沿った順序でフォーカスが当たること
推奨対応	コード構造と見た目の順序を一致させる、必要に応じて tabindex 制御

一覧に戻る