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