キーボード フォーカス

多くのユーザーは、主な移動手段として、キーボードや、スイッチ デバイスなどのキーボードの機能を模倣した他のソフトウェア/ハードウェアを使用しています。手首の捻挫や手根トンネルのような細かい運動障がいなど、一時的に身体的な障害がある人や、障がいのない人も、個人的な好み、効率、ハードウェアの破損を理由として、キーボードを使用してページを移動することがあります。

ロービジョンや目の見えないユーザーは、拡大ソフトウェアやスクリーン リーダー ソフトウェアと組み合わせて、ナビゲーションにキーボードを使用することがあります。ただし、目の見えるユーザーとは異なるキーボード ショートカット コマンドで画面を移動できます。

こうした障害や状況のすべてにキーボードをサポートすることは非常に重要です。キーボードのユーザー補助機能の大部分はフォーカスが中心となっています。フォーカスとは、現在キーボードから入力を受け取っている画面上の要素のことです。

このモジュールでは、キーボードとフォーカス可能な要素の HTML 構造と CSS スタイルについて学習します。JavaScript モジュールには、インタラクティブ要素のフォーカス管理とキー入力に関する詳細情報が含まれています。

フォーカスの順序

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

ほとんどの言語では、フォーカスの順番はページの最上部から始まり、下部で終わり、左から右へ進んでいきます。ただし、一部の言語は右から左に読み上げられるため、ページの主要言語には別のフォーカス順序が必要になる場合があります。

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

非インタラクティブ HTML 要素、カスタム コンポーネント、自然フォーカスのセマンティクスをオーバーライドする ARIA を使用する要素など、通常はフォーカスを受け取らない要素を含めるようにフォーカス順序を更新できます。

タブインデックス

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

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

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

この例では、フォーカスを自然に受け取らない要素に tabindex 属性が追加されています。要素の順序は、フォーカス順序にどの程度依存できるかを示すため、tabindex を使用して操作されました。これはやってはいけないことの一例です。

新しいフォーカス順序には HTML が反映されます。
キーボード ユーザーが CodePen HTML のタブ間を移動します。

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

冗長なリンクまたは不要なリンクグループを避ける 1 つの方法は、リンクをスキップすることです。スキップリンクは、ユーザーをウェブサイト上の別のページや外部リソースに誘導するのではなく、該当セクションの ID を使用して、同一ページの別のセクションにジャンプするアンカーリンクです。スキップリンクは通常、ユーザーがウェブサイトにアクセスしたときに最初に目にするフォーカス可能な要素として追加され、デザインの要件に応じて、ユーザーがタブに移動するまで表示または非表示になります。

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

すべてのリンクと同様に、スキップリンクにはリンクの目的に関するコンテキストを含めることが重要です。「メイン コンテンツにスキップする」というフレーズを追加することで、ユーザーはリンクから移動先を確認できます。リンクに追加コンテキストを提供する際、例に示すように aria-labelledby や aria-label 、<a> 要素のテキスト コンテンツへの追加など、さまざまなコード オプションから選択できます。

キーボード フォーカスを使用して CodePen をプレビューします。
スキップリンクの有無にかかわらず、キーボード ユーザーのナビゲーションを監視します。

フォーカス インジケーター

先ほど学習したように、フォーカスの順序はキーボードのユーザー補助の重要な側面です。そのフォーカスのスタイル方法を決定することも重要です。フォーカスの順序が良好であったとしても、適切なスタイル設定なしでは、ユーザーはページ内の現在地を確認できないからです。

表示フォーカス インジケーターは、ユーザーがページ上で常にどこにいるかを知らせるうえで重要なツールです。これは、目の見えるキーボードのみを使用するユーザーにとっては特に重要です。

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

現在、最新のウェブブラウザには、ウェブサイトやアプリのフォーカス可能な要素に適用されるさまざまなデフォルトのビジュアル スタイルが用意されています。見やすいものもあれば、見やすいものもあります。ユーザーがページ内を移動すると、その要素がキーボード フォーカスを受け取ると、このスタイル設定が適用されます。

ブラウザがフォーカスのスタイル設定を処理できるようにする場合は、コードを確認して、テーマがブラウザのデフォルトのスタイルをオーバーライドしないことを確認する必要があります。多くの場合、オーバーライドはスタイルシートで "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 */
}

カスタム スタイル

もちろん、デフォルトのブラウザ スタイルを超えて、テーマを補完するカスタム フォーカス インジケーターを作成することもできます。カスタム フォーカス インジケーターは、自由に創造力を発揮できます。

フォーカス インジケーターの形状にはさまざまな形態があります。たとえば、枠線、枠線、下線、ボックス、背景の変更など、さまざまな明白なスタイル変更があり、キーボードのフォーカスがその要素上でアクティブであることを示すために色のみに依存しません。

フォーカス インジケーターのスタイルを変更して、バックグラウンドで失われないようにします。たとえば、ページの背景が白の場合、ボタンのフォーカス インジケーターを青色の背景に設定できます。ページの背景が青の場合、同じボタン フォーカス スタイルを白い背景に設定できます。

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

CSS に示されているフォーカス スタイル。
スタイル設定された各フォーカス要素をキーボード ユーザーがタブで移動する様子をご覧ください。

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

まとめ

ウェブサイトやアプリにユーザー補助機能があると見なされるには、マウスでアクセスできるものすべてにキーボードでもアクセスする必要があります。このモジュールでは、キーボード アクセシビリティの視覚的側面、特にフォーカス順序とフォーカス インジケーターに焦点を当てます。

理解度チェック

ARIA と HTML に関する知識の確認

白い背景で最もアクセスしやすい :focus CSS スタイルの例は、次のうちどれですか。

outline: 0.5rem solid yellow;
この場合、WCAG の色のコントラストに関するガイドラインに準拠していません。
background-color:black;
ユーザー補助機能を使用できる可能性もありますが、このデザインではドキュメント内のテキストの色と配置についてさらに考慮する必要があります。
text-decoration: dotted underline 2px blue;
このデザインが、このリストの中で最もアクセスしやすいオプションです。しかし、アクセシビリティに関する設計の選択肢はこれだけではありません。なお、WCAG で定められている 3:1 のカラー コントラスト比に準拠したデザインを使用してください。
outline: none; text-decoration:none; background:none;
一部のキーボード ユーザーには視覚的なインジケーターが重要です。フォーカス用のスタイルを常に含める。

スキップリンクの目的は何ですか？

キーボード ユーザーが冗長なリンクや役に立たないリンクグループをスキップできるようにします。
この機能は、ユーザーがすでに目的のページに移動している可能性がある長いナビゲーション メニューで特に役立ちます。
キーボード ユーザーが興味のないコンテンツをスキップできるようにします。
どのコンテンツがユーザーの興味を引くかを判断することは必ずしも不可能です。これは、スキップリンクの使用状況を定義する便利な方法ではありません。