WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

H4: リンク、フォームのコントロール、およびオブジェクトには、論理的なタブ移動順序を作成する

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

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

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、初期設定のタブ順番が十分でない時に、論理的なタブ順番を提供することである。 多くの場合、「G59: コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する」を用いることで十分であり、この達成方法は必要ではない。表示とは異なるタブ順番を設定すると、ユーザビリティ上の不具合を生じさせる可能性が高くなる。

場合によって、コンテンツ制作者はコード内のインタラクティブな要素の順番に従うことなく、コンテンツの関係をたどるタブ順番を指定しようとするかもしれない。この場合、インタラクティブな要素のtabindex属性を使用することで選択肢の順番を指定できる。tabindex属性には、0 から 32767 の間の値を付与する。

インタラクティブな要素がタブキーを使ってナビゲートされる時、要素はtabindex属性の値の増える順にフォーカスが与えられる。0 よりも大きなtabindex値を持つ要素は、tabindexがない又は 0 のtabindexの要素の前にフォーカスを受けることになる。0 よりも大きな tabindexを持つ全ての要素がフォーカスを受け取った後、残りのインタラクティブな要素はウェブページに現れる順番でフォーカスが与えられる。

事例

事例 1

系図の検索フォームで結婚記録を検索する。検索フォームには花嫁及び花婿用のいくつかの入力フィールドがある。フォームは、データテーブルを用いてマークアップされ、1列目に花婿、2列目に花嫁のフィールドがある。コンテンツの順番は行ごとであるが、コンテンツ制作者はフォームを列ごとにナビゲートする方がより論理的であると感じている。この方法では、全ての花婿の条件は花嫁の条件へ移る前に記入できる。入力フィールドの tabindex 属性は、列ごとにナビゲートするタブ順番を指定するのに使用される。

コード例:

<form action="#" method="post">
 <table summary="1列目に花婿の検索条件、2列目に花嫁の検索条件がある">
  <caption>結婚記録の検索</caption>
  <tr>
   <th>検索基準</th>
   <th>花婿</th>
   <th>花嫁</th>
  </tr>
  <tr>
   <th>名</th>
   <td><input type="text" size="30" value="" name="groomfirst" 
        title="花婿の名" tabindex="1"></td>
   <td><input type="text" size="30" value="" name="bridefirst" 
        title="花嫁の名" tabindex="4"></td>
  </tr>
  <tr>
   <th>姓</th>
   <td><input type="text" size="30" value="" name="groomlast" 
        title="花婿の姓" tabindex="2"></td>
   <td><input type="text" size="30" value="" name="bridelast" 
        title="花嫁の姓" tabindex="5"></td>
  </tr>
  <tr>
   <th>出生地</th>
   <td><input type="text" size="30" value="" name="groombirth" 
        title="花婿の出生地" tabindex="3"></td>
   <td><input type="text" size="30" value="" name="bridebirth" 
        title="花嫁の出生地" tabindex="6"></td>
  </tr>
 </table>
</form>

事例 2

ウェブページは上部の右端に検索フィールドを提供している。コンテンツの順番が最初ではないが、タブ順番が最初になるようにフィールドには tabindex="1" が与えられている。

事例 3

tabindex 値は、連続した番号である必要はなく、特定の値で始まる必要もない。値は一意的である必要もない。同じ tabindex 値を持つ要素は、その文字の出現順にナビゲートされる。

タブ順番がコンテンツ順番に従っているコンテンツのセクションにおいて、個々の要素に異なるtabindex値を指定するよりも, 全ての要素に同じ値を与えることでエラーを起こりにくくすることが可能である。それらの要素を再配列する、又は新しい要素を加える、及び論理的なタブ順番を設定することは容易である。

コード例:

 <a href="xxx" tabindex = "1">リストの1番目のリンク</a>
 <a href="xxx" tabindex = "1">リストの2番目のリンク</a>
 <a href="xxx" tabindex = "1">初めにリストが作られて大分たってから追加されたリンク</a>
 <a href="xxx" tabindex = "1">リストの3番目のリンク</a>
 ...
 <a href="xxx" tabindex = "1">リストの20番目のリンク</a> 

参考リソース

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

検証

チェックポイント

  1. tabindex が使われている。

  2. tabindex が使われているならば、tabindex 属性により指定されたタブ順番がコンテンツの関係に従っている。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。