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