キーボード フォーカス

多くのユーザーは、キーボード、またはキーボードの機能を模倣したソフトウェアやハードウェア（スイッチ デバイスなど）を主なナビゲーション手段として使用しています。これは、個人の好み、効率性、ハードウェアの故障などが原因である可能性があります。

手首の捻挫などの一時的な身体的制限や、手根管症候群などの細かい運動機能の障がいがあるユーザーは、キーボードを使って操作することを選択する場合があります。ロービジョンまたは全盲のユーザーは、拡大鏡やスクリーン リーダー ソフトウェアと組み合わせてキーボードを使用する場合があります。ただし、画面を操作するために、視覚障害のないユーザーとは異なるキーボード ショートカット コマンドを使用する場合があります。

障がいのない人も、キーボードを使って操作することを選択する場合があります。

これらの障害や状況すべてに対するキーボード サポートは非常に重要です。キーボードのユーザー補助の大部分はフォーカスを中心に展開されます。フォーカスとは、キーボードからの入力をアクティブに受け取っている画面上の要素を指します。

このモジュールでは、キーボードとフォーカス可能な要素の HTML 構造と CSS スタイリングに焦点を当てます。JavaScript モジュールには、インタラクティブ要素のフォーカス管理とキーストロークに関する詳細情報が記載されています。

フォーカス順序

キーボード ユーザーが移動できる要素は、フォーカス可能な要素と呼ばれます。フォーカス順序（タブ順序またはナビゲーション順序とも呼ばれます）は、要素がフォーカスを受け取る順序です。デフォルトのフォーカス順序は、論理的で直感的であり、ページの視覚的な順序と一致している必要があります。

ほとんどの言語では、フォーカス順はページの先頭から始まり、ページの末尾で終わります。左から右に移動します。ただし、右から左に読む言語もあるため、ページの主要言語によっては、フォーカス順序を別のものにする必要があります。

デフォルトでは、フォーカス順序には、リンク、チェックボックス、テキスト入力など、自然にフォーカス可能な HTML 要素が含まれます。自然にフォーカス可能な HTML 要素には、組み込みのタブ順序サポートと基本的なキーボード イベント処理が含まれます。

フォーカス順序を更新して、通常はフォーカスを受け取らない要素（インタラクティブでない HTML 要素、カスタム コンポーネント、ARIA を持つ要素など）を含め、自然なフォーカス セマンティクスをオーバーライドできます。

Tabindex

フォーカス順序は、正の tabindex 属性を持つ要素（存在する場合）から始まり、最小の正の数から最大の正の数（1、2、3 など）へと移動します。その後、DOM の順序に従って tabindex が 0 の要素を移動します。tabindex が負の値の要素は、自然なフォーカス順序から削除されます。

通常はフォーカスできない要素に tabindex のゼロ（tabindex="0"）が適用されると、DOM での表示順序に従って、ページの自然なフォーカス順序に追加されます。ただし、自然にフォーカス可能な HTML 要素とは異なり、完全にアクセスできるようにするには、追加のキーボード サポートを提供する必要があります。

同様に、通常はフォーカス可能だが、入力フィールドが入力されるまで動作しないボタンなど、非アクティブな要素がある場合は、この要素に負の tabindex（tabindex="-1"）を追加する必要があります。負の tabindex を追加すると、このボタンを自然なフォーカス順序から除外するよう支援技術やキーボードに通知されます。ただし、必要に応じて JavaScript を使用して要素にフォーカスを戻すことができます。

この例では、フォーカスを自然に受け取らない要素に tabindex 属性が追加されています。tabindex を使用して要素の順序を操作し、フォーカスの順序に与える影響を示しました。これは避けるべき運用の例です。

リンクをスキップ

最近のほとんどのウェブサイトでは、ページごとに一貫したメニューリンクの長いリストがページのメイン ヘッダーにあります。これは一般的なナビゲーションには適していますが、キーボードのみを使用するユーザーが、タブを複数回押すことなくウェブサイトのメイン コンテンツに簡単にアクセスすることが難しくなる可能性があります。

冗長なリンクや役に立たないリンクのグループをスキップする方法の 1 つは、スキップ リンクを追加することです。スキップ リンクは、ウェブサイトの別のページや外部リソースにユーザーを送信するのではなく、同じページの別のセクションの ID を使用して、そのセクションにジャンプするアンカー リンクです。スキップ リンクは通常、ユーザーがウェブサイトにアクセスしたときに最初にフォーカスされる要素として追加されます。デザインの要件に応じて、表示される場合と、ユーザーがタブで移動するまで視覚的に非表示になる場合があります。

ユーザーが Tab キーを押すと、アクティブなスキップ リンクが配置されている場合、キーボード フォーカスがスキップ リンクに移動します。ユーザーはスキップリンクをクリックして、ヘッダー セクションとメイン ナビゲーションをスキップできます。スキップ リンクをクリックせずに DOM をタブ移動し続けると、次のフォーカス可能な要素に移動します。

すべてのリンクと同様に、スキップ リンクにはリンクの目的に関するコンテキストを含めることが重要です。「メイン コンテンツにスキップ」というフレーズを追加すると、リンクの移動先をユーザーに知らせることができます。リンクにコンテキストを追加するコード オプションは多数あります。たとえば、aria-labelledby、aria-label、または例に示すように <a> 要素のテキスト コンテンツに追加する方法があります。

フォーカス インジケータ

先ほど学習したように、フォーカス順序はキーボード アクセシビリティの重要な側面です。フォーカスのスタイルを決定することも重要です。フォーカス順序が優れていても、適切なスタイル設定がなければ、ユーザーはページ上のどこにいるのかを把握できません。

フォーカス インジケーターを視覚的に表示することは、ユーザーがページ上のどこにいるかを常に把握できるようにするために非常に重要です。これは、キーボードのみを使用するユーザーにとって特に重要です。フォーカスが隠されていない（最小）: フォーカス インジケーターが他のコンポーネントの下に隠れないようにします。

ブラウザのデフォルトのスタイル設定

現在、すべての最新のウェブブラウザには、ウェブサイトやアプリのフォーカス可能な要素に適用されるデフォルトの視覚スタイルが異なっており、見やすさも異なります。ユーザーがページをタブ移動すると、要素がキーボード フォーカスを受け取ったときにこのスタイルが適用されます。

ブラウザにフォーカス スタイルの処理を許可する場合は、テーマがブラウザのデフォルトのスタイルをオーバーライドしないことを確認するために、コードを確認することが重要です。オーバーライドは、スタイルシートで "outline: 0" または "outline: none" として記述されることがよくあります。この小さなコードは、ブラウザのデフォルトのフォーカス インジケーターのスタイル設定を削除し、ユーザーがウェブサイトやアプリを操作することを非常に困難にします。

非推奨 - アウトラインなし

a:focus {
  outline: none; /* don't do this! */
}

推奨 - スタイルの設定されたアウトライン

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

カスタム スタイル

もちろん、デフォルトのブラウザ スタイルを超えて、テーマを補完するカスタム フォーカス インジケーターを作成することもできます。カスタム フォーカス インジケーターを作成する際は、自由にクリエイティブな表現ができます。

フォーカス インジケーターの形状は、アウトライン、境界線、下線、ボックス、背景の変更など、さまざまな形式をとることができます。また、キーボードのフォーカスがその要素でアクティブであることを示すために、色だけに頼らない、他の明らかなスタイルの変更も可能です。

フォーカス インジケーターのスタイルを変更して、確実に表示されるようにします。たとえば、ページの背景が白の場合、ボタンのフォーカス インジケーターの背景を青に設定できます。ページが青色の背景の場合、同じボタンのフォーカス スタイルを白色の背景に設定できます。

要素のタイプに基づいてフォーカス要素のスタイルを変更できます。たとえば、本文のリンクには点線のアンダーラインを使用し、ボタン要素には丸い枠線を選択できます。

1 つのページに設定できるフォーカス インジケーターのスタイル数にルールはありませんが、不必要な混乱を避けるため、妥当な数に抑えるようにしてください。