カスタムのインタラクティブ コントロールは、フォーカス可能である必要があります。JavaScript を使用して <div
> を手軽なプルダウンにした場合、タブオーダーには自動的に挿入されません。すべてのカスタム コントロールがキーボードでフォーカス可能であることを手動で確認する必要があります。キーボード アクセスの基礎もご覧ください。
手動でのテスト方法
カスタム コントロールがフォーカス可能かどうかをテストするには、TAB
キーを押してサイト内を移動します。
ページ上のインタラクティブなコントロールすべてにアクセスできますか?
そうでない場合は、tabindex
を使用して、これらのコントロールのフォーカス可能性を改善する必要があります。tabindex を使用してフォーカスを制御するもご覧ください。
修正方法
カスタム コントロールをフォーカス可能にするには、tabindex="0"
を使用してカスタム コントロール要素を自然なタブオーダーに挿入します。例:
<div tabindex="0">Focus me with the TAB key</div>
重要である理由
マウスを使用しない、または使用しないユーザーにとっては、画面上のあらゆるものを操作する主な手段としてキーボード ナビゲーションが使用されます。優れたキーボード エクスペリエンスは、論理的なタブオーダーと、簡単に識別できるフォーカス スタイルによって決まります。キーボード ユーザーがフォーカスされている項目を見ることができない場合、そのページを操作する手段はありません。
詳しくは、ユーザー補助の審査方法をご覧ください。