要約

タブ順序をコンテンツ内の論理的な順序と一致させ、すべてのフォームおよびスクリプトコントロールにアクセスできるようにします。

テクニック

例

例 1 — 二列フォーム

次の例は、配送先住所と請求先住所を並べて配置するためのテーブルレイアウトの一部を示しています。フォームフィールドから次のフォームフィールドへの論理的な順序を保証するためにtabindex属性を使用しています。

<table>
   <tr>
      <td>
         <span id="shipping">Shipping Address</span>
      </td>
      <td>
         <span id="billing">Billing Address</span>
         <label>
            <input type="checkbox" id="bill-sameas" tabindex="8"/>
            Use shipping address for billing
         </label>
      </td>
   </tr>
   <tr>
      <td>
         <span class="label" id="str">Street</span>
         <input type="text" id="ship-street"
            aria-labelledby="shipping str" tabindex="1"/>
      </td>
      <td>
         <span class="label">Street</span>
         <input type="text" id="bill-street"
            aria-labelledby="billing str" tabindex="9"/>
      </td>
   </tr>
   <tr>
      <td>
         <span class="label" id="city">City</span>
         <input type="text" id="ship-city"
            aria-labelledby="shipping city" tabindex="2"/>
      </td>
      <td>
         <span class="label">City</span>
         <input type="text" id="bill-city"
            aria-labelledby="billing city" tabindex="10"/>
      </td>
   </tr>
   …
</table>
例 2 - タブ順序にカスタムコントロールを追加する

次の例では、スクリプト化された画像ボタンをタブ順序に組み込むためにtabindex属性を0に設定しています。

<img src="controls/start.png"
    id="start"
    role="button"
    tabindex="0"
    alt="Start"/>
例 3 — モーダルダイアログで負のタブ順序値を使用する

次の例では、スクリプトによってポップアップ ダイアログボックスが開かれるまで、ユーザーがタブキーでポップアップ ダイアログボックスに移動できないように、 tabindex属性を-1に設定しています。

<div role="dialog" aria-modal="true" aria-label="Results"
     tabindex="-1" >
   …
</div>

解説

キーボードのタブボタンは、ハイパーリンク、スクリプトコントロール、フォームなどのインタラクティブな要素間を移動するためのショートカットを提供します。ユーザーがタブキーを押したときにこれらの要素がフォーカスを取得する順序は、タブ順序と呼ばれます。

デフォルトでは、ネイティブHTMLコントロール（例：a 、button、input）は、マークアップで記載されている順序に従ってタブキーによるフォーカスを受け取ります。多くの場合、これで意味のあるタブ順序を提供できますが、複雑なレイアウトやカスタムコントロールのスクリプトがあると、順序の問題が発生する場合があります。

たとえば、フォームを二つの横並びの列としてレイアウトするためにテーブルレイアウトを使用することがあります（例1を参照）。この場合、一つのフィールドから次のフィールドにタブ移動すると、ユーザーは一つの列を上から下に移動してから次の列に移動するのではなく、二つの列間（つまり、各行の一つのセルから次のセル）で移動してしまいます。

同様に、スクリプト コントロールを作成した場合、ブラウザーと支援技術はタブキーを介して要素にアクセスできないので、そのタブ順序を明示的に指定する必要があります。

このような問題を解決するには、 tabindex属性を使って、要素のデフォルトのタブ順序を変更したり、またはタブ順序に要素を追加します。属性の値は、次のいずれかでなければなりません。

一般的に、フォーカス可能な要素がマークアップ内で正しい順序になっているようにして、正のtabindex値を使用しなくても良いようにするのが最善です。シーケンスの作成は簡単な作業のように見えるかもしれませんが、これを行うと予期しない結果が生じることがよくあります。たとえば、ファイルの末尾にあるフォームフィールドに対してタブ順序を作成する必要がある場合、フォームの前のすべてのフォーカス可能な要素（すべてのハイパーリンクなど）にtabindex値が割り当てられていないと、ユーザーは最初にTabキーを押したときにフォームに移動されてしまいます。並べ替えられたフォーカス可能な要素の長いシーケンスを維持することも面倒です。

関連リンク