HTML 及び XHTML
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、初期設定のタブ順番が十分でない時に、論理的なタブ順番を提供することである。 多くの場合、「G59: コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する」を用いることで十分であり、この実装方法は必要ではない。表示とは異なるタブ順番を設定すると、ユーザビリティ上の不具合を生じさせる可能性が高くなる。
場合によって、コンテンツ制作者はコード内のインタラクティブな要素の順番に従うことなく、コンテンツの関係をたどるタブ順番を指定しようとするかもしれない。この場合、インタラクティブな要素の tabindex 属性を使用することで選択肢の順番を指定できる。tabindex 属性には、0 から 32767 の間の値を付与する。
インタラクティブな要素がタブキーを使ってナビゲートされる時、要素は tabindex 属性の値の増える順にフォーカスが与えられる。0 よりも大きな tabindex 値を持つ要素は、tabindex がない又は 0 の tabindex の要素の前にフォーカスを受けることになる。0 よりも大きな tabindexを持つ全ての要素がフォーカスを受け取った後、残りのインタラクティブな要素はウェブページに現れる順番でフォーカスが与えられる。
系図の検索フォームで結婚記録を検索する。検索フォームには花嫁及び花婿用のいくつかの入力フィールドがある。フォームは、データテーブルを用いてマークアップされ、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>
ウェブページは上部の右端に検索フィールドを提供している。コンテンツの順番が最初ではないが、タブ順番が最初になるようにフィールドには tabindex="1" が与えられている。
tabindex 値は、連続した番号である必要はなく、特定の値で始まる必要もない。値は一意的である必要もない。同じtabindex 値を持つ要素は、その文字の出現順にナビゲートされる。そのため、下記の事例ではタブ順番は1、3、2、4となる。
コード例:
<a href="" tabindex="1">1</a>
<a href="" tabindex="2">2</a>
<a href="" tabindex="1">3</a>
<a href="" tabindex="2">4</a>
タブ順番がコンテンツ順番に従っているコンテンツのセクションにおいて、個々の要素に異なる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>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
tabindex が使われている。
tabindex が使われているならば、tabindex 属性により指定されたタブ順番がコンテンツの関係に従っている。
2.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。