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