さまざまなユーザーが、キーボードを使用してアプリを操作します。一時的または永続的な運動障がいのあるユーザーから、キーボード ショートカットを使用して効率と生産性を高めるユーザーまで、多岐にわたります。論理的なタブの順序は、キーボードをスムーズに操作するための重要な要素です。
手動でのテスト方法
アプリケーションのタブ順が論理的かどうかを確認するには、タブでページを移動してみます。 要素がフォーカスされる順序は、DOM 順序に従うようにする必要があります。一般的にフォーカスは読み上げ順に従い、左から右、ページの上から下へ向かうようにする必要があります。
詳しくは、キーボード アクセスの基礎をご覧ください。
ページ上のインタラクティブなコントロールすべてにアクセスできますか？
そうでない場合は、tabindex を使用して、これらのコントロールのフォーカス可能性を改善する必要があります。一般的な経験則として、ユーザーが操作または入力できるコントロールは、フォーカス可能で、フォーカス インジケーターを表示する必要があります。キーボード ユーザーがフォーカスされている項目を見ることができない場合、そのページを操作する手段はありません。
修正方法
フォーカスの順序が間違っていると思われる場合は、DOM 内の要素を再配置して、タブの順序を自然にする必要があります。
ページ上のすべてのインタラクティブなコントロールにアクセスできない場合、まずはカスタム コントロールを標準化された HTML 代替に置き換える必要があります。たとえば、ボタンとして機能する <div> を <button> に置き換えます。組み込みの HTML 要素を使用すると、サイトのアクセシビリティが大幅に向上し、作業量を大幅に削減できます。
標準化された HTML と同等のもののないカスタム インタラクティブ コンポーネントを作成する場合は、tabindex 属性を使用して、キーボードからアクセス可能になるようにします。例:
<div tabindex="0">Focus me with the TAB key</div>
詳しくは、tabindex を使用してフォーカスを制御するをご覧ください。