一時的または永続的な運動機能障がいのあるユーザーから、キーボード ショートカットを使用して効率と生産性を高めるユーザーまで、さまざまなユーザーがキーボードを使用してアプリを操作しています。アプリに適切なキーボード ナビゲーション戦略を用意すると、すべてのユーザーにとってエクスペリエンスが向上します。
フォーカスとタブ順
特定の時点でのフォーカスとは、現在キーボードからの入力を受信しているアプリ内の要素（フィールド、チェックボックス、ボタン、リンクなど）を指します。フォーカスのある要素は、キーボード イベントを受信するだけでなく、クリップボードから貼り付けられたコンテンツも受け取ります。
ページにフォーカスを移動するには、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
次のステップ
コンピュータの操作をほぼすべてキーボードや他の入力デバイスで行うユーザーにとって、アプリをアクセス可能で使いやすくするには、論理的なタブ順序が不可欠です。タブ順序を確認することをおすすめします。公開する前にアプリをタブで移動してみてください。