—

`tabindex`の基礎：要素をフォーカス可能にする魔法

`tabindex`属性は、HTML要素をタブキーによるナビゲーション順序に含めるか、あるいはプログラム的にフォーカス可能にするかを制御するための強力なツールです。しかし、その強力さゆえに、安易な乱用はアクセシビリティを損なう原因にもなりかねません。まずは、その基本的な振る舞いを正しく理解しましょう。

`tabindex`属性の基本的な値

1. `tabindex=”0″`:

• この要素をタブ順序に含めます。
• タブキーを押した際、DOMツリー上の自然な順序（ソースコード上の出現順序）に従ってフォーカスが移動します。
• フォーカスはプログラム的にも（`element.focus()`で）当てることができます。
• 通常は、インタラクティブではない要素（例: `
  `, ``, `

• `など）をタブ順序に含めたい場合に用います。

2. `tabindex=”-1″`:

• この要素をタブ順序から除外します。
• タブキーを押してもフォーカスは移動しません。
• しかし、プログラム的にはフォーカスを当てることができます（`element.focus()`）。
• 主に、特定のユーザーアクション（例: 矢印キー操作）に応じて動的にフォーカスを移動させたいが、タブキーではスキップしたい場合に非常に有効です。

3. `tabindex=”1`以上の正の整数”:

• この要素をタブ順序に含め、その値が小さい順にフォーカスが移動します。
• 避けるべき値です。 自然なDOM順序を無視してフォーカス順序を強制するため、ページの構造を理解しにくくし、アクセシビリティを大きく損ないます。よほどの理由がない限り、絶対に使用しないでください。

`tabindex=”0″`によるリストアイテムのフォーカス化（初期アプローチ）

まずは、最もシンプルなアプローチとして、リストアイテムに直接`tabindex=”0″`を付与してみましょう。

シンプルなリストアイテムのフォーカス制御

以下のリストは、各アイテムに`tabindex=”0″`を付与しています。タブキーで各アイテムにフォーカスが当たります。

• りんご
• バナナ
• みかん
• ぶどう
• いちご

このアプローチの問題点は、リストアイテムの数が増えるとタブキーを何度も押す必要があり、冗長になることです。

次に、矢印キーナビゲーションの実装に進みます。

/ css/style.css /
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
line-height: 1.6;
color: #333;
}

h1, p {
margin-bottom: 15px;
}

ul {
list-style: none;
padding: 0;
border: 1px solid #ccc;
border-radius: 5px;
max-width: 400px;
margin-bottom: 30px;
}

li {
padding: 10px 15px;
border-bottom: 1px solid #eee;
cursor: pointer;
}

li:last-child {
border-bottom: none;
}

/ フォーカス時のスタイルを定義 /
li:focus {
outline: 2px solid dodgerblue; / 標準のアウトラインを維持しつつ、色を強調 /
outline-offset: -1px; / 枠線とアウトラインの重なりを防ぐ /
background-color: #e0f2ff;
}

/ 選択状態のスタイル（後ほどJavaScriptでaria-selectedと連携） /
li[aria-selected=”true”] {
background-color: #d0edff;
font-weight: bold;
}

このコードを実行し、タブキーを押してみてください。各`

しかし、すぐに気づくはずです。リストアイテムが5個程度ならまだしも、これが50個、100個となったらどうでしょう？タブキーを50回、100回も押して目的のアイテムにたどり着くのは、非常に非効率でストレスフルな体験です。これが、このアプローチの「泥臭さ」であり、現場で避けるべきアンチパターンの一つなのです。

そこで登場するのが、矢印キーによるリスト内ナビゲーションです。

—

矢印キーナビゲーションの設計思想：効率とアクセシビリティの融合

先ほどのようなタブキーの冗長性を解消し、かつアクセシビリティを向上させるために考案されたのが、矢印キーによるリスト内ナビゲーションです。これは、特定のUIコンポーネント（リストボックス、メニュー、ツリービューなど）において、ユーザーがより直感的にアイテム間を移動できるようにするためのパターンです。

WAI-ARIA Authoring Practices Guide (APG) は、この種のコンポーネントにおけるキーボードナビゲーションの設計原則と実装パターンを提供しています。特に「Listbox」パターンは、今回のテーマに直接的に関連します。

ARIAロールとプロパティの活用

矢印キーナビゲーションを実装する際には、以下のARIAロールとプロパティを適切に組み合わせることが重要になります。

• `role=”listbox”`: リスト全体（`
  `など）に付与し、選択可能なアイテムのリストであることをスクリーンリーダーに伝えます。
  • `role=”option”`: 各リストアイテム（`
  • `）に付与し、それがリストボックス内の選択可能なオプションであることを示します。
  • `aria-selected=”true”` / `aria-selected=”false”`: 現在のリストアイテムが選択状態にあるか否かをスクリーンリーダーに伝えます。
  • `tabindex=”-1″` / `tabindex=”0″`の動的な切り替え: これが今回の肝です。リスト全体にはタブキーでフォーカスできるようにしつつ、個々のアイテムには矢印キーで移動する際のみフォーカスを当てます。

  基本的な考え方は以下の通りです。

  1. リスト全体にフォーカスを当てる: 親要素（`

  `）に`tabindex=”0″`を付与し、タブキーでリスト全体に一度フォーカスが当たるようにします。
  2. 最初のアイテムのみ初期フォーカス可能: 子要素（`
  • `）のうち、最初のアイテムにのみ`tabindex=”0″`を付与し、それ以外のアイテムは`tabindex=”-1″`とします。これにより、タブキーでリストに入った際、最初のアイテムにフォーカスが当たります。
    3. 矢印キーでフォーカスを移動: JavaScriptを使って、上下矢印キーが押されたら、現在フォーカスが当たっているアイテムの`tabindex`を`-1`にし、次のアイテムの`tabindex`を`0`にして`focus()`メソッドでフォーカスを移動させます。
    4. 選択状態を管理: `aria-selected`属性とCSSを使い、現在選択されているアイテムを視覚的にも、スクリーンリーダー的にも明確にします。

    このアプローチを取ることで、ユーザーはタブキーを一回押すだけでリスト全体に入り、その後は矢印キーで効率的にリスト内を移動できるようになります。

    —

    実践！矢印キーによるリスト内ナビゲーションの実装パターン

    それでは、実際に矢印キーによるリスト内ナビゲーションを実装してみましょう。

    HTMLの準備

    まずはHTMLマークアップです。`role`属性と`tabindex`の初期値を適切に設定します。

    
    
    
    
    
    
    
    

    キーボード操作可能なリストナビゲーション

    以下のリストは、タブキーでリスト全体にフォーカスを当てた後、矢印キーでアイテム間を移動できます。

    • プロジェクトAの進捗報告
    • タスクBの仕様検討会議
    • 週次チームミーティング
    • デザインレビュー会
    • バグ修正優先度決定

    このリストは、キーボード操作に最適化されています。

    
    
    

    重要なポイントは以下の通りです。

    • `
      `
      • `role=”listbox”`: スクリーンリーダーに対して、これがリストボックスであることを明示します。
      • `tabindex=”0″`: タブキーを押すと、まずこの`
        `要素自体にフォーカスが当たります。これがリストへの「入り口」です。
        • 最初の`
        • `には`tabindex=”0″`と`aria-selected=”true”`を付与します。
        • それ以降の`
        • `には`tabindex=”-1″`と`aria-selected=”false”`を付与します。これにより、タブキーで直接これらのアイテムにフォーカスが当たるのを防ぎます。

        CSSの準備

        フォーカス状態、選択状態を視覚的に明確にするためのCSSを準備します。

        / css/style.css (既存に追加または修正) /
        body {
        font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px;
        line-height: 1.6;
        color: #333;
        }

        h1, p {
        margin-bottom: 15px;
        }

        / シンプルリストのスタイルはここでは割愛しますが、必要に応じて残してください /
        / ul.simple-list li:focus { … } /

        / キーボードナビゲーションリストのコンテナ /
        ul.keyboard-nav-list {
        list-style: none;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        max-width: 400px;
        margin-bottom: 30px;
        }

        / キーボードナビゲーションリストの各アイテム /
        ul.keyboard-nav-list li {
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
        cursor: pointer; / マウスユーザー向けにカーソルをポインタに /
        transition: background-color 0.2s ease; / ホバー・フォーカス時のアニメーション /
        }

        ul.keyboard-nav-list li:last-child {
        border-bottom: none;
        }

        / リストコンテナ自体にフォーカスが当たった時のスタイル（ここではリスト内をハイライト） /
        / 注意: listboxロールの場合、外枠にフォーカスが当たっている状態を明示することが重要です。 /
        ul.keyboard-nav-list:focus-within {
        outline: 2px solid #5a9bff; / リスト全体へのアウトライン /
        outline-offset: 2px;
        }

        / アクティブなアイテム（tabindex=”0″が付与されているアイテム）のスタイル /
        ul.keyboard-nav-list li[tabindex=”0″] {
        outline: none; / 個々のアイテムのデフォルトフォーカスリングはJSで管理するため消す /
        }

        / 選択状態（aria-selected=”true”）のアイテムのスタイル /
        ul.keyboard-nav-list li[aria-selected=”true”] {
        background-color: #d0edff; / 選択されているアイテムの背景色 /
        font-weight: bold;
        color: #0056b3;
        }

        / ホバー時のスタイル /
        ul.keyboard-nav-list li:hover {
        background-color: #f0f8ff;
        }

        ここでは、`ul.keyboard-nav-list:focus-within`を使って、リスト全体にフォーカスが当たっていることを視覚的に示しています。個々の`li`のフォーカスはJavaScriptで管理し、`aria-selected=”true”`のスタイルを定義しています。

        JavaScriptの実装（本丸！）

        いよいよJavaScriptで、キーボード操作のロジックを実装します。

        // js/script.js
        document.addEventListener(‘DOMContentLoaded’, () => {
        // キーボード操作対象のリスト要素を取得
        const list = document.querySelector(‘.keyboard-nav-list’);
        if (!list) {
        console.warn(‘キーボードナビゲーションリストが見つかりません。’);
        return;
        }

        // すべてのリストアイテムを取得
        const listItems = Array.from(list.querySelectorAll(‘[role=”option”]’));

        // 現在フォーカスが当たっている（tabindex=”0″が設定されている）アイテムのインデックスを保持
        let currentFocusIndex = listItems.findIndex(item => item.tabIndex === 0);
        if (currentFocusIndex === -1 && listItems.length > 0) {
        // もし初期状態でtabindex=”0″のアイテムが見つからない場合は、最初のアイテムを初期フォーカスに設定
        currentFocusIndex = 0;
        listItems[currentFocusIndex].tabIndex = 0;
        listItems[currentFocusIndex].setAttribute(‘aria-selected’, ‘true’);
        }

        /

        • フォーカスを新しいアイテムに移動させる関数
        • @param {number} newIndex – 新しいフォーカス先のアイテムのインデックス

        /
        function moveFocus(newIndex) {
        // インデックスが範囲外にならないように調整
        if (newIndex < 0) { newIndex = listItems.length - 1; // 循環: 最初から最後へ } else if (newIndex >= listItems.length) {
        newIndex = 0; // 循環: 最後から最初へ
        }

        // 現在フォーカスが当たっているアイテムのtabindexを-1にし、aria-selectedをfalseにする
        if (currentFocusIndex !== -1 && listItems[currentFocusIndex]) {
        listItems[currentFocusIndex].tabIndex = -1;
        listItems[currentFocusIndex].setAttribute(‘aria-selected’, ‘false’);
        }

        // 新しいフォーカス先のアイテムのtabindexを0にし、aria-selectedをtrueにする
        const newItem = listItems[newIndex];
        newItem.tabIndex = 0;
        newItem.setAttribute(‘aria-selected’, ‘true’);
        newItem.focus(); // 実際にフォーカスを移動させる

        // スクロールしてアイテムが見えるようにする (オプション)
        newItem.scrollIntoView({ behavior: ‘smooth’, block: ‘nearest’ });

        // 現在のフォーカスインデックスを更新
        currentFocusIndex = newIndex;
        }

        // リスト全体に対するキーダウンイベントリスナー
        list.addEventListener(‘keydown’, (event) => {
        // イベントの伝播を停止し、デフォルトのブラウザ動作を抑制
        // これがないと、上下キーでページ全体がスクロールしてしまう
        event.preventDefault();

        switch (event.key) {
        case ‘ArrowUp’: // 上矢印キー
        moveFocus(currentFocusIndex – 1);
        break;
        case ‘ArrowDown’: // 下矢印キー
        moveFocus(currentFocusIndex + 1);
        break;
        case ‘Home’: // Homeキー: 最初のアイテムに移動
        moveFocus(0);
        break;
        case ‘End’: // Endキー: 最後のアイテムに移動
        moveFocus(listItems.length – 1);
        break;
        case ‘Enter’: // Enterキー: 選択されたアイテムに対するアクションを実行
        case ‘ ‘: // スペースキー: 選択されたアイテムに対するアクションを実行
        // ここで選択されたアイテムに対するカスタムアクションを実行
        if (listItems[currentFocusIndex]) {
        console.log(`[Enter/Space] 選択されたアイテム: ${listItems[currentFocusIndex].textContent}`);
        // 例: リンク遷移、モーダル表示、データ送信など
        // alert(`”${listItems[currentFocusIndex].textContent}” が選択されました！`);
        }
        break;
        default:
        // その他のキーはデフォルトの動作を許可するか、無視する
        // ここでevent.preventDefault(); をコメントアウトすると、
        // 他のキー入力（例: テキスト入力）が許可される場合もある
        break;
        }
        });

        // マウスでのクリック操作にも対応
        list.addEventListener(‘click’, (event) => {
        const clickedItem = event.target.closest(‘[role=”option”]’);
        if (clickedItem && clickedItem !== listItems[currentFocusIndex]) {
        const newIndex = listItems.indexOf(clickedItem);
        if (newIndex !== -1) {
        moveFocus(newIndex);
        }
        }
        // クリックした要素にフォーカスを移動させる（tabindex=”0″が付与されるため）
        if (clickedItem) {
        clickedItem.focus();
        }
        });

        // リストコンテナがフォーカスを失ったときの処理
        // ここでは特に何もせず、現在の選択状態を維持。
        // 必要であれば、選択状態をリセットするなどの処理を追加できる。
        list.addEventListener(‘blur’, () => {
        // console.log(‘リストがフォーカスを失いました。’);
        // 例: リスト外にフォーカスが移ったらaria-selectedをすべてfalseにする
        // listItems.forEach(item => item.setAttribute(‘aria-selected’, ‘false’));
        // currentFocusIndex = -1; // フォーカスインデックスをリセット
        }, true); // キャプチャフェーズでイベントを捕捉
        });

        このJavaScriptコードのキモは、`moveFocus`関数と`keydown`イベントリスナーです。

        1. `moveFocus(newIndex)`関数:

        • 現在フォーカスされているアイテムの`tabindex`を`-1`に、`aria-selected`を`false`に設定解除します。
        • 新しいフォーカス先のアイテムの`tabindex`を`0`に、`aria-selected`を`true`に設定します。
        • `newItem.focus()`を呼び出し、実際にそのアイテムにプログラム的にフォーカスを移動させます。
        • `scrollIntoView`で、リストが長い場合に選択アイテムが画面内に収まるように配慮しています。

        2. `list.addEventListener(‘keydown’, …)`:

        • リスト全体にキーダウンイベントリスナーを設定します。
        • `event.preventDefault()`を呼び出すことで、矢印キーによるブラウザのデフォルトスクロール動作を抑制します。これは非常に重要です。
        • `event.key`を使って押されたキーを判定し、`ArrowUp`, `ArrowDown`, `Home`, `End`キーに応じて`moveFocus`を呼び出します。
        • `Enter`キーや`Space`キーが押された場合は、選択されたアイテムに対するアクションを実行するロジックを記述できます。これは、リストがメニューアイテムやボタンのような振る舞いをする場合に特に役立ちます。

        3. クリック操作への対応:

        • マウスユーザーのためにも、クリックでアイテムを選択・フォーカスできるように`click`イベントリスナーを追加しています。

        この実装により、タブキーを一回押すだけでリスト全体に入り、その後は上下矢印キーでスムーズにアイテム間を移動し、Enterキーでアクションを実行できるようになります。これは、マウス操作と同等か、それ以上に効率的なナビゲーションを提供し、アクセシビリティを劇的に向上させます。

        —

        高度な考慮事項とベストプラクティス

        上記の実装パターンは非常に強力ですが、さらに深い洞察とベストプラクティスを共有させてください。

        1. `aria-activedescendant`の活用（さらに高度なパターン）

        今回の実装では、実際に`

      • `要素に`focus()`を当てていますが、UIによっては、親要素（`
        `）にフォーカスを当てたまま、子要素の選択状態をスクリーンリーダーに伝えたい場合があります。その際に利用するのが`aria-activedescendant`属性です。
        • 親要素（`
          `）に`tabindex=”0″`を付与し、常にフォーカスを保持します。
          • 親要素に`aria-activedescendant=”ID_OF_CURRENTLY_SELECTED_ITEM”`を設定し、JavaScriptで選択された子要素のIDを動的に更新します。
          • 子要素自体には`tabindex=”-1″`を維持し、`focus()`を呼び出しません。

          このパターンは、フォーカスリングを親要素に固定したい場合や、仮想リストのようにDOM要素が常に存在しない（または大量にある）場合に有効です。ただし、実装はより複雑になります。今回のテーマ「リストアイテムへのフォーカス制御」には直接的ではないため、今回は`focus()`で直接`

        • `にフォーカスを当てるシンプルなアプローチを採用しました。しかし、知識として持っておくと、選択肢が広がります。
          

          2. マウス操作との共存と状態管理

          キーボード操作だけでなく、マウス操作も考慮に入れる必要があります。上記のサンプルコードでは、クリックイベントリスナーを追加して、マウスでの選択にも対応しています。

          また、選択されたアイテムの状態管理も重要です。単に`aria-selected=”true”`を設定するだけでなく、アプリケーションの状態（例: Redux, Vuex, React Contextなど）と連携させて、選択状態を一元的に管理することも検討しましょう。

          3. スクリーンリーダーへの配慮

          `role`属性や`aria-selected`属性の適切な使用は、スクリーンリーダーユーザーにとって非常に重要です。これらの属性が正しく設定されていれば、スクリーンリーダーはリストボックスと各オプションの関係性を理解し、現在選択されているアイテムや、キーボードで操作可能であることを正確にユーザーに伝えます。

          4. 異なる種類のリストへの応用

          今回の例は汎用的なリストボックスパターンでしたが、HTMLリスト要素には他にも`

          `、`

          `、`

          `といった記述リストもあります。これらはより複雑な構造を持つため、単一の`role=”option”`では対応しきれない場合があります。

          • メニュー (`role=”menu”`): ドロップダウンメニューやアプリケーションメニューに使用します。`role=”menuitem”`を子要素に適用します。
          • ツリービュー (`role=”tree”`): 階層構造を持つリストに使用します。`role=”treeitem”`や`aria-expanded`などを組み合わせます。

          コンポーネントのセマンティクスに合わせて、適切なARIAロールとプロパティを選択することが、アクセシブルなUI設計の鍵です。

          —

          ブラウザの裏側：フォーカス管理のメカニズム

          私たちがJavaScriptで`element.focus()`を呼び出すとき、ブラウザの内部ではどのような処理が行われているのでしょうか？簡単にそのメカニズムを紐解いてみましょう。

          1. フォーカスイベントの発生: `element.focus()`が呼び出されると、ブラウザはまず現在のフォーカス要素からフォーカスを解除し（`blur`イベント）、新しい要素にフォーカスを移動させます（`focus`イベント）。
          2. アクセシビリティツリーの更新: ブラウザはDOMツリーとは別に「アクセシビリティツリー」というものを構築しています。このツリーには、各要素のロール、プロパティ、状態などが含まれており、スクリーンリーダーなどの支援技術がこれを利用します。フォーカスが移動すると、このアクセシビリティツリーも更新され、どの要素が現在アクティブであるかが支援技術に通知されます。
          3. ビジュアルの更新（フォーカスリング）: ブラウザは、フォーカスが当たっている要素に対して、デフォルトで「フォーカスリング」と呼ばれる視覚的なインジケーターを描画します。これはユーザーが現在どの要素にフォーカスしているかを識別するための非常に重要な手がかりです。`outline`CSSプロパティを使ってこのリングをカスタマイズできますが、`outline: none;`を安易に設定することはアクセシビリティを損なうため、避けるべきです。今回の例では、`li[tabindex=”0″]`に`outline: none;`を設定していますが、これはJavaScriptで`aria-selected=”true”`のスタイルを適用することで、視覚的なフィードバックを提供しているためです。

          この一連のプロセスが、ユーザーがキーボードでウェブコンテンツを操作する際の「スムーズな体験」を支えているのです。私たちがたった一行の`element.focus()`を書く裏側で、これだけの協調動作が行われていると考えると、改めてブラウザの偉大さを感じますね。

          —

          まとめ：アクセシビリティは「基本」であり「UXの要」

          いかがでしたでしょうか？単なるHTMLリストのキーボード操作一つとっても、これだけ奥深い世界が広がっていることを感じていただけたでしょうか。

          今回の記事を通じて、私たちは以下のことを学びました。

          • `tabindex=”0″`や`tabindex=”-1″`を適切に使うことで、非インタラクティブ要素をフォーカス可能にできる。
          • しかし、すべてのリストアイテムに`tabindex=”0″`を付与するだけでは、冗長でユーザー体験を損なう可能性がある。
          • WAI-ARIAの`role=”listbox”`や`role=”option”`、そして`aria-selected`属性とJavaScriptを組み合わせることで、矢印キーによる効率的かつアクセシブルなリストナビゲーションを実現できる。
          • `event.preventDefault()`を使って、ブラウザのデフォルト動作を抑制することが重要。
          • マウス操作との共存や、ブラウザの内部的なフォーカス管理メカニズムへの理解が、より堅牢な実装に繋がる。

          アクセシビリティは「特殊な要件」ではなく、「基本的な品質」であり、すべてのユーザーに最高の体験を提供する上での「UXの要」です。今回ご紹介したパターンは、多くのUIコンポーネントに応用できる普遍的な設計原則に基づいています。

          皆さんが日々の開発において、単に見た目を整えるだけでなく、その裏側にあるユーザー体験、特にキーボード操作の重要性を意識し、一歩踏み込んだ実装に挑戦してくれることを願っています。

          それでは、また次の記事でお会いしましょう！現場の皆さん、これからも一緒に最高のフロントエンド体験を追求していきましょう！