DOM の順序を視覚的順序と一致させる

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML 及び XHTML で使用される CSS

これは、次の達成基準に関する達成方法である:

解説

この達成方法の目的は、ソースコード上のコンテンツの順序が、コンテンツの視覚的提示の順序と同じになるようにすることである。ソースコード上のコンテンツの順序は、コンテンツ制作者によって、CSS による視覚的提示とは異なるものにされる場合がある。それぞれの順序はその状態では意味の分かるものになっているかもしれないが、支援技術の利用者にとっては混乱をもたらす可能性がある。そのようなことは、(スクリーンリーダーのように) ソースコードから直接コンテンツにアクセスしている、又はキーボードでコンテンツを操作していることで、コンテンツ制作者による提示を利用者が無効にすることによって起こり得る。ソースの順序に従ってスクリーンリーダーでページコンテンツを読んでいる全盲の利用者が、視覚的な順序で読んでいる目の見える利用者と一緒に作業している場合、異なる順序で情報に遭遇すると混乱するかもしれない。スクリーンリーダーと組み合わせて画面拡大ソフトウェアを使用しているロービジョンの利用者は、読み上げ順序が画面上をスキップしているように見える場合に混乱する可能性がある。キーボード利用者は、ソースの順序が視覚的な順序と一致しない場合に、次にフォーカスが移動する場所を予想するのが困難になるかもしれない。

表示結果の順序を前提としなければ、ページの全体を理解することが難しい状況もあるかもしれない。その場合、もしソースの順序が異なっていたら、理解することはさらに難しくなってしまう。

ソースの順序が視覚的順序と一致する場合、全ての人が同じ (正しい) 順序でコンテンツを読んで情報のやり取りをすることができる。

注記

HTML の tabindex 属性には二つの機能がある。ひとつは要素をフォーカス可能にすることであり、もうひとつは要素にフォーカスの順序を割り当てることである。tabindex の値を 0 にするとその要素はフォーカス可能になるが、フォーカスが追加されるだけで順序はソースの通りになる。フォーカスの順序は、tabindex に指定された正の値だけで昇順となる。tabindex の値をドキュメントオブジェクトモデル (DOM) の要素の順序と異なるように設定することは、支援技術の利用者にとっては不適当な順序となることもある。これは主に、tabindex が CSS ではなく、HTML 又は XHTML で指定されていることによるものだ。この点については、将来の仕様で変更される可能性がある。それは、視覚的な提示の順序とは異なる可能性もある。

事例

参考リソース

参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

訳注 1

「Microsoft Internet Explorer Developer Toolbar」はページが削除されているが、代わりに開発者ツールを使用できる。詳細については、Internet Explorer 開発者ツールを理解するを参照のこと。

訳注 2

Firefox のアドオン「Firebug」は開発が終了している。代わりに開発ツールを使用できる。開発ツール | MDN も参照のこと。

訳注 3

Google Chrome の場合、類似のツールが利用できる。詳細については、Chrome DevTools  |  Tools for Web Developers  |  Google Developers を参照のこと。

訳注 4

Edge の場合も、類似のツールが利用できる。詳細については、Microsoft Edge Developer Tools - Microsoft Edge Development | Microsoft Docs を参照のこと。

検証

手順

  1. エンドユーザに提供されているウェブページのコンテンツの順序を視覚的に検査する。
  2. DOM を表示できるツールを使って、DOM 内の要素を検査する。
  3. ソースコードセクション上でのコンテンツの順序が、ウェブページのコンテンツの視覚的提示と一致していることを確認する (例: 英語のページの場合、順序は上から下へ、左から右へとなる)。

期待される結果

  • #3 の結果が真である。