インタラクティブ コントロールはキーボードでフォーカス可能

公開日: 2019 年 5 月 2 日

すべてのカスタム コントロールがキーボード フォーカス可能で、フォーカス インジケーターが表示されることを手動で確認します。要素がフォーカスされる順序は、DOM 順に従うようにします。どの要素にフォーカスを当てるべきかわからない場合は、web.dev の Learn Accessibility コースのフォーカス モジュールをご覧ください。

手動テストの方法

カスタム コントロールにフォーカス可能で、フォーカス インジケーターが表示されることをテストするには、まずサイトをタブで移動します。TAB（または SHIFT + TAB）を使用してコントロール間を移動し、矢印キー、ENTER、SPACE を使用して値を操作します（キーボード アクセスの基本も参照）。

ページ上のすべてのインタラクティブ コントロールにアクセスできますか？ 各インタラクティブ コントロールにフォーカス インジケーターがありますか？

修正方法

ページ上のすべての要素をタブで移動できない場合は、tabindex を使用してそれらのコントロールのフォーカス可能性を改善する必要があるかもしれません。

カスタム コントロールにフォーカスを当てられるようにするには、tabindex="0" を使用してカスタム コントロール要素を自然なタブ順に挿入します（tabindex でフォーカスを制御するも参照）。次に例を示します。

<div tabindex="0">Focus me with the TAB key</div>

カスタム コントロール要素に適切な ARIA ロールを追加する必要がある場合もあります。カスタム コントロールに ARIA ロールがあるをご覧ください。

フォーカス インジケーターが表示されない場合は、:focus を使用して常にフォーカス インジケーターを表示することを検討してください。マウスまたはキーボードのどちらを使用してタブ移動しても、ボタンのフォーカス インジケーターは常に同じように表示されます（フォーカスのスタイルも参照）。

重要である理由

マウスを使用できない、または使用しないユーザーにとって、キーボード ナビゲーションは画面上のすべての要素にアクセスするための主な手段です。優れたキーボード エクスペリエンスは、論理的なタブ順序と認識可能なフォーカス スタイルに依存します。キーボード ユーザーがフォーカスされている内容を確認または把握できない場合、ページを操作する方法がありません。

ユーザー補助機能について詳しくは、Learn Accessibility をご覧ください。

リソース