<button> や <input> などの標準の HTML 要素には、キーボード ユーザー補助機能が無料で組み込まれています。ただし、カスタム インタラクティブ コンポーネントを作成する場合は、tabindex 属性を使用してキーボードから確実にアクセスできるようにします。
コントロールがキーボードにアクセスできるかどうかを確認する
Lighthouse のようなツールは、ユーザー補助機能に関する特定の問題を検出するのに優れていますが、中には人間にしかテストできないものもあります。
Tab キーを押してサイト内を移動してみてください。ページ上のすべてのインタラクティブな
コントロールにアクセスできるかそうでない場合は、tabindex を使用して、これらのコントロールのフォーカス可能性を改善する必要があります。
タブオーダーに要素を挿入する
tabindex="0" を使用して、自然なタブオーダーに要素を挿入します。次に例を示します。
<div tabindex="0">Focus me with the TAB key</div>
要素をフォーカスするには、Tab キーを押すか、要素の focus() メソッドを呼び出します。
タブオーダーから要素を削除する
tabindex="-1" を使用して要素を削除します。次に例を示します。
<button tabindex="-1">Can't reach me with the TAB key!</button>
これにより、通常のタブオーダーから要素が削除されますが、focus() メソッドを呼び出すことで、その要素をフォーカスできます。
なお、要素に tabindex="-1" を適用しても、その子には影響しません。子が自然にタブオーダーにある場合、または tabindex 値によりある場合は、タブオーダーのままになります。タブオーダーから要素とそのすべての子を削除するには、WICG の inert ポリフィルの使用を検討してください。ポリフィルは、提案された inert 属性の動作をエミュレートします。これにより、支援技術による要素の選択や読み取りができなくなります。
tabindex > 0 を避ける
tabindex が 0 より大きい場合、要素は自然なタブオーダーの前にジャンプします。tabindex が 0 より大きい要素が複数ある場合、タブオーダーは 0 より大きい最小値から始まり、上に移動します。
スクリーン リーダーはタブ順ではなく DOM 順にページを移動するため、0 より大きい tabindex の使用はアンチパターンとみなされます。要素をタブオーダーでより早く並べる必要がある場合は、その要素を DOM 内の前の位置に移動する必要があります。
Lighthouse では、tabindex が 0 より大きい要素を簡単に識別できます。ユーザー補助監査（Lighthouse > [オプション] > [ユーザー補助]）を実行し、「[tabindex] の値が 0 より大きい要素はありません」という監査の結果を確認します。
「tabindex の移動」でアクセス可能なコンポーネントを作成する
複雑なコンポーネントを作成する場合は、フォーカス以外のキーボード サポートの追加が必要になる場合があります。組み込みの select 要素について考えてみましょう。これはフォーカス可能であり、矢印キーを使用して追加機能（選択可能なオプション）を表示できます。
独自のコンポーネントに同様の機能を実装するには、「tabindex の移動」と呼ばれる手法を使用します。tabindex の移動は、現在アクティブな子を除くすべての子に対して tabindex を -1 に設定することで機能します。次に、コンポーネントはキーボード イベント リスナーを使用して、ユーザーがどのキーを押したかを判断します。
この場合、コンポーネントは以前にフォーカスされていた子の tabindex を -1 に設定し、フォーカスされる子の tabindex を 0 に設定して、focus() メソッドを呼び出します。
変更前
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
変更後
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
キーボード アクセスのレシピ
カスタム コンポーネントに必要なキーボード サポートのレベルがわからない場合は、ARIA Authoring Practices 1.1 をご覧ください。この便利なガイドでは、一般的な UI パターンと、コンポーネントがサポートする必要があるキーについて説明します。