すべてのカスタム コントロールがキーボードでフォーカス可能であり、フォーカス インジケータが表示されることを手動で確認します。要素にフォーカスを当てる順序は、DOM 順に従うようにする必要があります。フォーカスを受け取る要素がわからない場合は、web.dev のユーザー補助機能の学習コースのフォーカス モジュールをご覧ください。
手動テストの方法
カスタム コントロールがフォーカス可能で、フォーカス インジケータが表示されることをテストするには、まずサイトをタブで移動します。TAB（または SHIFT +
TAB）を使用してコントロール間を移動し、矢印キー、ENTER、SPACE を使用して値を操作します（キーボード アクセスの基本も参照）。
このページのすべてのインタラクティブ コントロールにアクセスできますか？ 各インタラクティブ コントロールにフォーカス インジケーターはありますか？
修正方法
ページ上のすべての要素をタブで移動できない場合は、tabindex を使用して、それらのコントロールのフォーカス可能性を改善する必要があります。
カスタム コントロールをフォーカス可能にするには、tabindex="0" を使用してカスタム コントロール要素を自然なタブ順序に挿入します（tabindex でフォーカスを制御するも参照）。例:
<div tabindex="0">Focus me with the TAB key</div>
カスタム コントロール要素に適切な ARIA ロールを追加することが必要になる場合もあります。カスタム コントロールの ARIA ロールをご覧ください。
フォーカス インジケーターが表示されない場合は、:focus を使用してフォーカス インジケーターを常に表示することを検討してください。マウスまたはキーボードを使用してタブ移動しても、ボタンのフォーカス インジケーターは常に同じになります（フォーカスのスタイルも参照）。
これが重要な理由
マウスを使用できない、または使用しないことを選択しているユーザーにとって、画面上のすべての要素にアクセスする主な手段はキーボード ナビゲーションです。優れたキーボード エクスペリエンスは、論理的なタブ順序と認識可能なフォーカス スタイルに依存します。キーボード ユーザーがフォーカスされている要素を確認または把握できない場合、ページを操作する方法はありません。
詳しくは、ユーザー補助機能の審査を行う方法をご覧ください。
リソース
- インタラクティブなコントロールはキーボードでフォーカス可能の監査のソースコード。
- 一部の要素で
[tabindex]の値が0より大きい。 - セマンティック HTML を使用して、キーボードでの操作を容易にします。