このページには、前バージョン(2008年12月11日版の日本語訳)から修正(追加、変更または削除)された箇所があります。
設定:全ての修正を非表示   |   削除箇所を表示/非表示  |   問題No.を表示/非表示   |   [ここから] / [ここまで] を表示/非表示   |   全ての修正を表示

表示サンプル: このページの修正箇所は次のように表示されます。

WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する不適合事例である:

解説

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

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

この不適合事例は、以前より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属性によって指定されているタブ順序がコンテンツの関係性に従っている。

判定基準

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。