WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F44: 達成基準 2.4.3 の失敗例 - tabindex 属性を用いて、意味及び操作性を保持しないタブ順序を指定している

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する失敗例である:

解説

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

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

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

事例

失敗例 1

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

コード例:


  <ol>
   <li><a href="main.html" tabindex="1">ホーム</a></li>
   <li><a href="chapter1.html" tabindex="4">第1章</a></li>
   <li><a href="chapter2.html" tabindex="3">第2章</a></li>
   <li><a href="chapter3.html" tabindex="2">第3章</a></li>
  </ol>

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

失敗例 2

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

参考リソース

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

検証

チェックポイント

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

判定基準