【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C27: DOM の順序を表示順序と一致させる

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

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

適用 (対象)

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. ソースコードセクション上でのコンテンツの順序が、ウェブページのコンテンツの視覚的提示と一致していることを確認する (例: 英語のページの場合、順序は上から下へ、左から右へとなる)。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。