すべてのカスタム コントロールがキーボードのフォーカス可能であり、フォーカス インジケーターを表示することを手動で確認します。要素がフォーカスされる順序は、DOM 順序に従うようにする必要があります。フォーカスを受け取る要素がわからない場合は、フォーカスの概要をご覧ください。
手動でのテスト方法
カスタム コントロールがフォーカス可能でフォーカス インジケーターが表示されているかをテストするには、まずサイトを Tab キーで移動します。コントロール間を移動するには TAB
(または SHIFT +
TAB
)を使用し、値を操作するには、矢印キー、ENTER
、SPACE
を使用します(キーボード アクセスの基礎もご覧ください)。
ページ上のインタラクティブなコントロールすべてにアクセスできますか? インタラクティブなコントロールごとにフォーカス インジケーターは表示されますか?
修正方法
ページ内のすべての要素をタブで移動できない場合は、tabindex
を使用してそれらのコントロールのフォーカス可能性を改善する必要があります。
カスタム コントロールをフォーカス可能にするには、tabindex="0"
を使用してカスタム コントロール要素を自然なタブオーダーに挿入します(tabindex を使用してフォーカスを制御するもご覧ください)。例:
<div tabindex="0">Focus me with the TAB key</div>
適切な ARIA ロールをカスタム コントロール要素に追加することが必要になる場合もあります。詳しくは、カスタム コントロールに ARIA ロールが付与されているをご覧ください。
フォーカス インジケーターが表示されない場合は、:focus
を使用してフォーカス インジケーターを常に表示することを検討してください。タブ操作にマウスとキーボードのどちらを使用しても、ボタンのフォーカス インジケーターは常に同じに見えます(フォーカスのスタイルもご覧ください)。
重要である理由
マウスを使用しない、または使用しないユーザーにとっては、画面上のあらゆるものを操作する主な手段としてキーボード ナビゲーションが使用されます。優れたキーボード エクスペリエンスは、論理的なタブオーダーと、簡単に識別できるフォーカス スタイルによって決まります。キーボード ユーザーがフォーカスされている項目を見ることができない場合、そのページを操作する手段はありません。
詳しくは、ユーザー補助の審査方法をご覧ください。