G59：コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する
出典：WAIC. “
G59: コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する
” WCAG 2.0 達成方法集（参照2024年7月1日）
概要
G59は、ウェブコンテンツの設計において、インタラクティブな要素（リンク、フォームコントロールなど）がコンテンツ内の順序や関係性に従って確実にフォーカスを受けるようにするためのガイドラインです。これは、ユーザーがキーボードのTabキーを使用してコンテンツ内を移動する際に、視覚的なレイアウトと一致した論理的な順序でフォーカスが移動することを保証することを目的としています。
例えば、HTMLではデフォルトのフォーカス順序は、ソースコード内で各要素が登場する順序となります。これが視覚的なレイアウトと一致していれば、ユーザーがTabキーを押すと視覚的な順序通りにフォーカスが移動します。しかし、ソースの順序が視覚的な順序と一致しない場合、論理的な順序を反映したフォーカス順序を設定する必要があります。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
適用（対象）
こちらは、次の達成基準に関連する達成方法です。
実践的な方法
ソースコードの順序と視覚的な順序を一致させる
コンテンツのソースコードを、視覚的なレイアウトと一致するように配置します。これにより、デフォルトのタブ順序が自然に視覚的な順序と一致します。
tabindex属性の使用
tabindex属性を使用して、カスタムのタブ順序を設定できます。ただし、乱用するとユーザーにとって混乱を招く可能性があるため、慎重に使用する必要があります。正しく設定されたtabindexは、視覚的な順序に一致した論理的なフォーカス順序を提供することができます。
ARIAランドマークの使用
ARIAランドマーク（例：nav、main、asideなど）を使用して、コンテンツ内の主要なセクションを特定します。これにより、スクリーンリーダーユーザーがキーボードを使ってセクション間を効率的に移動できるようになります。
フォーカス管理スクリプト
JavaScriptを使用して、特定の条件下でフォーカスを管理するスクリプトを作成します。例えば、ダイアログボックスやモーダルウィンドウが開かれた際に、フォーカスを適切に設定し、閉じた際には元の位置に戻すなどの機能を実装します。
まとめ
G59は、ウェブコンテンツ内のインタラクティブな要素が、論理的かつ視覚的な順序に従ってフォーカスを受けるようにするための重要なガイドラインです。これにより、キーボードユーザーが直感的にナビゲートでき、アクセシビリティが向上します。実践的な方法として、ソースコードの順序の調整、tabindex属性やARIAランドマークの使用、フォーカス管理スクリプトの実装、そしてコンテンツのテストが挙げられます。これらの方法を組み合わせることで、ユーザーにとって使いやすいウェブコンテンツを提供することができます。
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のサイト内にある英語版であることにご注意ください。