C27：DOMの順序を表示順序と一致させる
出典：WAIC. “
C27: DOM の順序を表示順序と一致させる
” WCAG 2.0 達成方法集（参照2024年7月1日）
概要
C27は、ソースコード上のコンテンツの順序が、実際にユーザーに表示される順序と一致するようにするためのガイドラインです。これは、特に支援技術を利用するユーザーにとって重要です。視覚的な表示とソースコードの順序が一致しない場合、スクリーンリーダーやキーボード操作の際に混乱を招く可能性があります。
例えば、スクリーンリーダーを使用してページの内容を読み上げる場合、ソースコードの順序で読み上げられるため、視覚的な順序と一致しないと情報の把握が困難になります。同様に、キーボードユーザーはフォーカスが予期しない順序で移動するため、操作に混乱を来たす可能性があります。
このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。
適用（対象）
こちらは、次の達成基準に関連する達成方法です。
実践的な方法
HTMLの構造を考慮した設計
ページのHTMLを設計する際には、視覚的な表示順序を意識してコンテンツを配置します。これにより、CSSによって順序を変更する必要がなくなります。
CSSの使用を最小限にする
ソースコードの順序を変更せずに視覚的なレイアウトを調整するために、CSSフレックスボックスやグリッドレイアウトを使用します。これらの技術は、DOMの順序を維持しながら、視覚的な表示を柔軟に調整することができます。
フォーカス管理
キーボード操作のフォーカス順序が予期した順序で移動するように、HTMLの順序を工夫します。タブインデックス属性を適切に使用して、フォーカスの移動を制御します。
コンテンツの再配置
必要に応じて、JavaScriptを使用してページ読み込み時にDOMを再配置し、視覚的な順序と一致させることも一つの方法です。
まとめ
C27は、ソースコードの順序と視覚的な表示順序を一致させることの重要性を強調しています。これにより、支援技術を利用するユーザーやキーボード操作のユーザーが混乱せずにコンテンツを利用できるようになります。HTMLとCSSの設計段階でこれを意識することで、アクセシブルなウェブページを作成することができます。
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のサイト内にある英語版であることにご注意ください。