一時的または永続的な運動機能障がいのあるユーザーから、キーボード ショートカットを使用して効率性と生産性を高めたいユーザーまで、さまざまなユーザーがキーボードを使用してアプリケーションを操作しています。アプリケーションのキーボード ナビゲーション戦略を適切に立てることで、すべてのユーザーにとってより良いエクスペリエンスが実現します。
フォーカスとタブオーダー
フォーカスとは、アプリ内のどの要素がキーボードからの入力をアクティブに受け取っているか（フィールド、チェックボックス、ボタン、リンクなど）を指します。キーボード イベントに加えて、フォーカスされた要素はクリップボードから貼り付けられたコンテンツも取得します。
ページ上でフォーカスを移動するには、TAB で「次へ」、SHIFT + TAB で「前へ」移動します。フォーカスされた要素は、多くの場合、フォーカス リングで示されます。フォーカス リングのスタイルはブラウザによって異なります。インタラクティブ要素間を前後に移動するフォーカスの順序は、タブオーダーと呼ばれます。
テキスト フィールド、ボタン、選択リストなどのインタラクティブな HTML 要素は暗黙的にフォーカス可能です。つまり、DOM 内の位置に基づいて、タブオーダーに自動的に挿入されます。これらのインタラクティブ要素には、キーボード イベント処理も組み込まれています。段落や div などの要素は、ユーザーが通常操作する必要がないため、暗黙的にフォーカス可能ではありません。
論理的なタブ順序を実装することは、ユーザーにスムーズなキーボード ナビゲーション エクスペリエンスを提供するための重要な要素です。タブオーダーを評価して調整する際には、次の 2 つの主な考え方を念頭に置く必要があります。
- DOM 内の要素を論理的な順序で配置する
- フォーカスを受け取るべきでないオフスクリーン コンテンツの可視性を正しく設定
DOM 内の要素を論理的な順序で配置する
アプリのタブ順序が論理的かどうかを確認するには、ページをタブで移動してみてください。一般的に、フォーカスは読み取り順序に従い、ページの上から下へ、左から右へ移動します。
フォーカス順序が正しくないと思われる場合は、DOM 内の要素を並べ替えて、タブ順序をより自然なものにする必要があります。サイトの視覚的な配置を変更するには、CSS で早く表示されるようにスタイルを設定するのではなく、DOM の早い位置に移動します。
次に例を示します。
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
CSS を使用して要素の視覚的な位置を変更する際は、論理的でないタブオーダーが作成されないように注意してください。論理的でないタブ順序を修正するため、フローティングの [Kiwi] ボタンを [Coconut] の後に移動し、インライン スタイルを削除しました。
オフスクリーン コンテンツの可視性を正しく設定する
画面外のインタラクティブ要素が DOM に存在する必要がある場合でも、タブオーダーに含めるべきではありません。たとえば、ボタンをクリックするとサイドバーに開くレスポンシブ ナビゲーションがある場合、ナビゲーションが閉じている間はユーザーがナビゲーションにフォーカスできないようにする必要があります。
特定のインタラクティブ要素がフォーカスを受け取らないようにするには、要素に次のいずれかの CSS プロパティを指定します。
display: nonevisibility: hidden
たとえば、ナビゲーションが開いているときに要素をタブオーダーに戻すには、これらの CSS プロパティをそれぞれ次のように置き換えます。
display: blockvisibility: visible
次のステップ
パソコンをほぼキーボードやその他の入力デバイスで操作するユーザーにとって、論理的なタブオーダーは、アプリのアクセシビリティと使いやすさを確保するために不可欠です。タブオーダーを確認する良い習慣として、公開する前にアプリケーションをタブで移動してみましょう。