JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLで要素のタブ移動順序を設定するには？tabindex属性の使い方を解説

HTMLでは、tabindex属性を使うことで、要素のタブ移動順序（タブオーダー）を設定できます。通常、キーボードの「Tab」キーを押すと、HTMLの記述順に沿ってフォーカスが移動しますが、tabindex属性を指定すれば、この移動順序を自由に変更することが可能です。

基本的な使い方

tabindex属性に正の数値を設定すると、その数値の小さい順にフォーカスが移動します。リンクやフォーム部品など、通常はフォーカス可能な要素に対して使用します。

サンプルコード

以下のコードを実行して、タブ移動順序がどのように変化するか確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <a href="https://www.tutorialspoint.com/current_affairs/index.htm" tabindex="1">時事問題</a><br>
      <a href="https://www.tutorialspoint.com/coding_ground.htm" tabindex="2">コーディング環境</a><br>
      <a href="https://www.tutorialspoint.com/verbal_ability/index.htm" tabindex="4">言語能力</a><br>
      <a href="https://www.tutorialspoint.com/quantitative_aptitude/index.htm" tabindex="3">数的処理</a><br>

      <p>上記の例では、表示順とは異なるタブ移動順序を設定しています。キーボードの「Tab」キーを押して、移動の流れを確認してみてください。</p>
   </body>
</html>

この例では、リンクの表示順序に関係なく、「1 → 2 → 3 → 4」の順番でフォーカスが移動します。3番目のリンクには「4」が、4番目のリンクには「3」が指定されているため、実際のタブ移動は入れ替わった順序になります。

tabindex属性に指定できる値

  • 正の数値（1以上）：数値の昇順に従ってタブ移動の順序が決まります。
  • 0：文書内の出現順にフォーカス可能になります。デフォルトでフォーカスできない要素（divなど）を操作可能にしたい場合に便利です。
  • -1：マウスクリックやJavaScriptによるプログラム的なフォーカスは可能ですが、Tabキーによる移動対象からは除外されます。

アクセシビリティに関する注意点

tabindexに正の値を多用すると、意図しないタブ移動の順序によってユーザーを混乱させる可能性があります。特にスクリーンリーダーを利用するユーザーにとっては、論理的な操作順序が失われる恐れがあります。

そのため、可能な限りHTMLの記述順とタブ移動順序を一致させることが推奨されます。どうしても順序を制御したい場合でも、正のtabindex値の使用は最小限にとどめ、tabindex="0" や tabindex="-1" を適切に活用するのが良い実践方法です。

  1. HTMLでリンクのターゲット（開き先）を変更する方法【target属性の使い方】

    HTMLでリンクのターゲット（開き先）を変更するには、<a>〜</a>タグのtarget属性を使用します。target属性を指定することで、リンク先を新しいタブで開いたり、同じタブで開いたりと、ページの表示方法を柔軟に制御できます。 target属性に指定できる値 属性値説明 _blankリンク先のページを新しいタブで開きます。 _selfリンク先のページを現在のタブ（同じフレーム）で開きます。省略時のデフォルト値です。 _parentリンク先のページを親フレームで開きます。 _topリンク先のページを最上位のフレームで開きます。フレーム構成を解除して全画面表示

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値