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

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

フォーカスとタブの順序

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

ページ上でフォーカスを移動するには、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

次のステップ

コンピュータの操作のほとんどをキーボードなどの入力デバイスで行っているユーザーの場合、アプリケーションを利用しやすくするために、論理的なタブオーダーが不可欠です。タブ順を確認する際は、公開のたびにタブで操作することをおすすめします。