カスタム コントロールにラベルが関連付けられています

カスタム インタラクティブ コントロールはフォーカス可能である必要があります。たとえば、JavaScript を使用して <div> を魅力的なプルダウンに変えた場合、プルダウンが正しいタブオーダーに自動的に挿入されるわけではありません。

すべてのカスタム コントロールがキーボードでフォーカス可能であることを手動で確認する必要があります。

可能な場合は、インタラクションを可能にするセマンティック HTML 要素を使用してください。

テスト方法

カスタム コントロールにフォーカスを当てられるかどうかをテストするには、TAB キーを押してサイト内を移動します。

ページ上のすべてのインタラクティブ コントロールにアクセスできますか？そうでない場合は、tabindex を使用して、これらのコントロールのフォーカス可能性を改善する必要があります。tabindex を使用してフォーカスを制御するもご覧ください。

修正方法

カスタム コントロールにフォーカスを設定するには、tabindex="0" を使用して、カスタム コントロール要素を自然なタブ順序に挿入します。例:

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

これが重要な理由

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

ユーザー補助機能テストを初めて行う場合は、手動によるユーザー補助機能テストと支援技術テストをご覧ください。

リソース