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

Rob Dodson

さまざまなユーザーがキーボードを使用してアプリケーションを操作 キーボードを使用するユーザーの一時的および永続的な運動機能障がい 効率性と生産性を高めることができます適切なキーボード ナビゲーションを確保する すべてのユーザーにとってより良いエクスペリエンスを生み出します。

フォーカスとタブの順序

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

ページにフォーカスを移動するには、TAB を使用して「次へ」に移動しますおよび SHIFT + TAB 戻ることができます。現在フォーカスされている要素は、 フォーカス リングが使用され、ブラウザによってフォーカス リングのスタイルが異なります。「 フォーカスがインタラクティブな要素を通じて前後に進む順序 タブオーダーと呼ばれます。

テキスト フィールド、ボタン、選択リストなどのインタラクティブな HTML 要素は、 暗黙的にフォーカス可能: タブオーダーに自動的に挿入されます。 特定のキャンペーンにおける DOM。 これらのインタラクティブ要素には、キーボード イベント処理も組み込まれています。Elements 暗黙的にフォーカスすることはできません。これは、ユーザーが通常 やり取りする必要はありません。

論理的なタブオーダーを実装することは、 スムーズなキーボード操作が可能です主に 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」「Coconut」の後に来るようにします。] ボタンが表示され、 インライン スタイルを削除します。

画面外のコンテンツの公開設定を正しく設定する

画面外のインタラクティブ要素は DOM 内に存在する必要があるが、そうでないことがある クリックします。たとえば、レスポンシブ サイド ナビゲーションを開いて ボタンをクリックしたときに、ユーザーがサイド ナビゲーションにフォーカスできないようにする必要があります。 閉じることができます。

特定のインタラクティブ要素がフォーカスを受け取らないようにするには、 この要素に、次のいずれかの CSS プロパティを指定します。

  • display: none
  • visibility: hidden

サイド ナビゲーションが再度設定されている場合など、要素をタブオーダーに再び追加するには 上記の CSS プロパティをそれぞれ次のように置き換えます。

  • display: block
  • visibility: visible
で確認できます。

次のステップ

ほぼ完全にキーボードでパソコンを操作するユーザーや、 入力デバイスを切り替えるには、論理的なタブオーダーが アクセスしやすく使いやすいものでなければなりませんタブの順序を確認することをおすすめします 各公開前にアプリをタブで確認してみよう。