コンテンツ内のシーケンスと関連性に応じた順序でインタラクティブ要素を配置する

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

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

適用 (対象)

インタラクティブ要素を含み、インタラクティブ要素のデフォルトのタブ順序を定義するすべての技術。

この達成基準は、達成基準 2.4.3: フォーカス順序 (十分) に関連する。

解説

この達成方法の目的は、インタラクティブな要素がコンテンツのシーケンスと関係性に従った順序でフォーカスを確実に受け取ることである。コンテンツを設計するとき、リンクやフォームコントロールなどのインタラクティブな要素がコンテンツに配置されるために、デフォルトのタブ順序はコンテンツ内のシーケンスと関係性に従う。それぞれのウェブコンテンツ技術がデフォルトのタブ順序を定義するため、コンテンツ内でコントロールを配置するメカニズムは、用いるウェブコンテンツ技術に依存することになる。

例えば HTML では、デフォルトのフォーカス順序は、コンテンツのソース内で要素が出現する順序に従う。HTML ソースの順序がウェブページの視覚的な順序に一致する場合、コンテンツのタブ移動はコンテンツの視覚的なレイアウトに従う。ソースの順序が視覚的な順序と一致しない場合、コンテンツのタブ移動順序は、視覚的に表示されるコンテンツの論理的な関係性を反映しなければならない。

事例

検証

手順

  1. コンテンツ内のインタラクティブな要素の順序を特定する。
  2. インタラクティブな要素の論理的な順序を特定する。
  3. コンテンツ内のインタラクティブな要素の順序が、その論理的な順序と同じであることを確認する。
注記

上記手順 1.「コンテンツ内のインタラクティブな要素の順序」とは、ソースコード内における記述順序を指すと考えられる。従って 2.の「論理的な順序」とはデザイン上の視覚的な順序を指すこととなる

期待される結果

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