キーボード アクセスの基礎

Rob Dodson

一時的または永続的な運動機能障がいのあるユーザーから、キーボード ショートカットを使用して効率と生産性を高めるユーザーまで、さまざまなユーザーがキーボードを使用してアプリを操作しています。アプリに適切なキーボード ナビゲーション戦略を用意すると、すべてのユーザーにとって使い勝手が向上します。

フォーカスとタブ順序

特定の時点でのフォーカスとは、現在キーボードから入力を受けているアプリ内の要素（フィールド、チェックボックス、ボタン、リンクなど）を指します。フォーカスされている要素は、キーボード イベントを受信するだけでなく、クリップボードから貼り付けられたコンテンツも受け取ります。

ページ内でフォーカスを移動するには、TAB を使用して「前方」に移動し、SHIFT + TAB を使用して「後方」に移動します。フォーカスされている要素は、フォーカス リングで示されることが多く、ブラウザによってフォーカス リングのスタイルは異なります。インタラクティブな要素をフォーカスが前後に移動する順序をタブ順序といいます。

テキスト フィールド、ボタン、選択リストなどのインタラクティブな HTML 要素は、暗黙的にフォーカス可能です。DOM 内の位置に基づいて、タブ順に自動的に挿入されます。これらのインタラクティブな要素には、キーボード イベント処理も組み込まれています。通常、ユーザーが操作する必要がないため、段落や div などの要素は暗黙的にフォーカス可能ではありません。

論理的なタブ順序を実装することは、ユーザーにスムーズなキーボード ナビゲーション エクスペリエンスを提供するうえで重要な要素です。タブ順序を評価して調整する際には、次の 2 つの主な考え方を念頭に置いてください。

  1. DOM 内の要素を論理的な順序で配置する
  2. フォーカスを受け取らない画面外コンテンツの可視性を正しく設定

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: none
  • visibility: hidden

サイドナビが開いているときなど、要素をタブ順序に再度追加するには、上記の CSS プロパティをそれぞれ次のように置き換えます。

  • display: block
  • visibility: visible

次のステップ

パソコンをキーボードや他の入力デバイスでほぼ操作するユーザーの場合、アプリケーションを使いやすくするには、論理的なタブ順序が不可欠です。タブ順を確認する習慣として、公開する前にアプリをタブで移動することをおすすめします。