このページの本文へ移動

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のサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ