カスタム インタラクティブ コントロールはフォーカス可能である必要があります。たとえば、JavaScript を使用して <div> を魅力的なプルダウンに変えた場合、プルダウンが正しいタブオーダーに自動的に挿入されるわけではありません。
すべてのカスタム コントロールがキーボードでフォーカス可能であることを手動で確認する必要があります。
可能な場合は、インタラクションを可能にするセマンティック HTML 要素を使用してください。
テスト方法
カスタム コントロールにフォーカスを当てられるかどうかをテストするには、TAB キーを押してサイト内を移動します。
ページ上のすべてのインタラクティブ コントロールにアクセスできますか？そうでない場合は、tabindex を使用して、これらのコントロールのフォーカス可能性を改善する必要があります。tabindex を使用してフォーカスを制御するもご覧ください。
修正方法
カスタム コントロールにフォーカスを設定するには、tabindex="0" を使用して、カスタム コントロール要素を自然なタブ順序に挿入します。例:
<div tabindex="0">Focus me with the TAB key</div>
これが重要な理由
マウスを使用できない、または使用しないことを選択しているユーザーにとって、画面上のすべての要素にアクセスする主な手段はキーボード ナビゲーションです。優れたキーボード エクスペリエンスは、論理的なタブ順序と認識可能なフォーカス スタイルに依存します。キーボードのユーザーがフォーカスされている項目が見えない場合、ユーザーはページを操作できません。
ユーザー補助機能テストを初めて行う場合は、手動によるユーザー補助機能テストと支援技術テストをご覧ください。