達成基準 2.4.3 の失敗例 － 意味及び操作性を保持しないタブ順序を作成するために、tabindex 属性を使用している

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

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

適用 (対象)

HTML 及び XHTML

これは達成基準 2.4.3: フォーカス順序 (失敗) に関する達成方法である。

解説

この文書は、タブ順序がコンテンツの論理的な関係性及び順序に従っていない失敗例について述べている。

リンク及びフォーム要素のようなフォーカス可能な要素には、tabindex 属性がある。要素は、tabindex 属性の値が小さいものから大きいものへという順序でフォーカスを受け取る。tabindex 属性の値が、コンテンツ内での関係性及び順序とは異なる順序で割り当てられていると、もはやタブ順序はコンテンツの関係性及び順序に従っていないことになる。

この失敗例の最も一般的な原因の一つは、tabindex が使用されているページを編集するときに発生する。コンテンツが編集されても、tabindex 属性がコンテンツの変更を反映するように更新されない場合、タブの順序とコンテンツの順序が一致しなくなり易い。

事例

例 1

次の事例は、代替のタブ順序を指定するために tabindex を誤って用いている。 

<ol>
   <li><a href="main.html" tabindex="1">Homepage</a></li>
   <li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>
   <li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
   <li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>
</ol>

このリストを Tab キーを用いてナビゲートする場合、リストは、Homepage、Chapter 3、Chapter 2、Chapter 1、という順序でナビゲートされ、コンテンツにおける順序通りではなくなってしまう。

例 2

すべてのテキストフィールドに対して tabindex 属性を提供することによって、ウェブページでのタブ順序が明確に設定されていた。後に、そのページには新しいテキストフィールドがページの中央付近に追加されたが、コンテンツ制作者はその新しいテキストフィールドに tabindex 属性を付加し忘れてしまった。結果として、新しいテキストフィールドのタブ順序がそのページの最後になってしまっている。

参考リソース

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

訳注

HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記は、HTML Standard §6.5.3. The tabindex attribute を代わりに参照できる。

検証

手順

  1. tabindex 属性を用いている場合、tabindex 属性によって指定されているタブ順序がコンテンツの関係性に従っているかどうかを確認する。

期待される結果

  • #1 の結果が偽である場合、この失敗例の条件は適用され、コンテンツは達成基準の失敗となる。