Focus Order2.4.3 フォーカス順序(レベルA)
ウェブページが順を追ってナビゲートできて、そのナビゲーション順が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは、意味及び操作性を損なわない順序でフォーカスを受け取る。
出典:WAIC. “
達成基準 2.4.3 を理解する
” WCAG 2.0 解説書(参照2024年6月1日)
概要
ウェブページ内でのユーザーのナビゲーションが予測可能で論理的な順序で行われることを求めています。これにより、キーボードだけを使用するユーザーやスクリーンリーダーを利用するユーザーが、ページ内の重要な情報や機能に容易にアクセスできるようになります。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
課題に対する実践的な方法
インタラクティブな要素を順序に従って配置する(G59)
インタラクティブな要素(リンク、ボタン、フォームコントロールなど)を、ユーザーが自然に操作できる順序で配置します。
G59:コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する次の達成方法の一つを用いて、コンテンツ内の順序及び関係性に従った順序でフォーカスを要素に与える
論理的なタブ順序を作成する(H4)
タブキーを使って移動する際、要素が論理的な順序でフォーカスされるようにHTMLを設計します。
H4:リンク、フォームコントロール、及びオブジェクトを通して、論理的なタブ順序を作成するDOMの順序と表示順序の一致(C27)
CSSの使用を最小限にし、DOM(Document Object Model)の順序が表示順序と一致するように設計します。
C27:DOM の順序を表示順序と一致させる次の達成方法の一つを用いて、ウェブページを動的に変化させる
動的コンテンツの適切な挿入(SCR26)
動的に生成されるコンテンツを、そのトリガーとなる要素の直後にDOM内で挿入するようにスクリプトを作成します。
SCR26:動的なコンテンツを、Document Object Modelの、そのトリガーとなる要素の直後に挿入するデバイス非依存なカスタムダイアログの作成(SCR37)
キーボードとマウスの両方に対応するカスタムダイアログを作成します。
SCR37:デバイス非依存な方法でカスタムダイアログを作成するページ上にある複数のセクションを並び替える(SCR27)
ページ内の複数のセクションを動的に並び替えられるようにし、ユーザーが必要な情報にすぐアクセスできるようにします。
SCR27:Document Object Modelを用いて、ページ上にある複数のセクションを並び替えるまとめ
達成基準 2.4.3は、ウェブページ内でのフォーカス順序がユーザーにとって予測可能で論理的であることを求めています。これにより、特にキーボードユーザーやスクリーンリーダーユーザーがページを効率的にナビゲートできるようになります。上記の実践的な方法を適用することで、インタラクティブな要素が適切に配置され、ユーザーエクスペリエンスが向上します。
WCAG 2.0とその翻訳文書の利用について
本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0」、「WCAG 2.0 解説書
」および「WCAG 2.0 達成方法集
」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。
WCAG 2.0
この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンスの下に提供されています。
WCAG 2.0 解説書及び達成方法集
この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。