焦点

The CSS Podcast - 018: Focus

ウェブページで、ウェブサイトのメイン コンテンツにユーザーをスキップするリンクをクリックします。これらは、スキップリンクまたはアンカーリンクとも呼ばれます。そのリンクをキーボードで Tab キーと Enter キーを使用して有効にすると、メイン コンテンツ コンテナの周囲にフォーカス リングが表示されます。なぜでしょうか？

これは、<main> に tabindex="-1" 属性値が設定されているためです。つまり、プログラムでフォーカスできます。<main> がターゲットに設定されると（ブラウザの URL バーの #main-content が id と一致するため）、プログラムによるフォーカスを受け取ります。このような状況ではフォーカス スタイルを削除したくなりますが、フォーカスを適切かつ慎重に処理することで、ユーザー エクスペリエンスを向上させることができます。インタラクションに興味をそそる要素を追加するのにも適しています。

フォーカスが重要な理由

ウェブ デベロッパーは、ウェブサイトを誰もがアクセスしやすく、包括的なものにする責任があります。CSS を使用してアクセス可能なフォーカス状態の作成も、この責任の一部です。

フォーカス スタイルは、キーボードやスイッチ コントロールなどのデバイスを使用してウェブサイトを操作するユーザーを支援します。要素にフォーカスが当たっていても視覚的な表示がないと、ユーザーはフォーカスが当たっている要素を見失う可能性があります。これにより、間違ったリンクにアクセスした場合などにナビゲーションの問題が発生し、望ましくない動作が発生する可能性があります。

要素にフォーカスが当たる仕組み

一部の要素は自動的にフォーカス可能です。<a>、<button>、<input>、<select> など、操作や入力を受け入れる要素です。つまり、すべてのフォーム要素、ボタン、リンクです。通常、ウェブサイトのフォーカス可能な要素を操作するには、Tab キーでページ上で前方に移動し、Shift+Tab キーで後方に移動します。

また、tabindex という HTML 属性もあります。これにより、Tab キーが押されるたびに、または URL のハッシュの変更や JavaScript イベントによってフォーカスが移動されるたびに、タブインデックス（要素がフォーカスされる順序）を変更できます。HTML 要素の tabindex が 0 に設定されている場合、Tab キーを介してフォーカスを受け取ることができ、ドキュメント ソースの順序で定義されたグローバルタブ インデックスが適用されます。

tabindex を -1 に設定すると、フォーカスを受け取ることができるのは、プログラムによってのみです。つまり、JavaScript イベントが発生した場合や、ハッシュが変更された場合（URL 内の要素の id と一致する場合）のみです。tabindex を 0 より大きい値に設定すると、ドキュメント ソースの順序で定義されるグローバル タブ インデックスから削除されます。タブ順序は tabindex の値で定義されるため、たとえば tabindex="1" の要素は tabindex="2" の要素よりも先にフォーカスを受け取ります。

フォーカスのスタイル設定

要素がフォーカスを取得したときのデフォルトのブラウザの動作は、フォーカス リングを表示することです。このフォーカス リングは、ブラウザとオペレーティング システムによって異なります。

この動作は、擬似クラスのレッスンで学習した :focus、:focus-within、:focus-visible 擬似クラスを使用して CSS で変更できます。要素のデフォルト スタイルとコントラストのあるフォーカス スタイルを設定することが重要です。たとえば、outline プロパティを使用するのが一般的です。

a:focus {
  outline: 2px solid slateblue;
}

outline プロパティがリンクのテキストに近すぎるように見えることがありますが、outline-offset プロパティを使用すると、要素が埋められる幾何学的サイズに影響を与えることなく、視覚的な padding を追加できるため、この問題を解決できます。outline-offset に正の値を指定すると、アウトラインが外側に押し出され、負の値を指定すると、アウトラインが内側に引き込まれます。

現在、一部のブラウザでは、要素に border-radius を設定して outline を使用すると、一致せず、アウトラインの角が鋭くなります。このため、box-shadow はシェイプにクリップされ、border-radius が尊重されるため、ぼかし半径の小さい box-shadow を使用するのが魅力的ですが、このスタイルは Windows のハイ コントラスト モードでは表示されません。これは、Windows の高コントラスト モードでシャドウが適用されず、ユーザーの好みの設定を優先するために背景画像をほとんど無視するためです。

まとめ

要素のデフォルト状態とコントラストのあるフォーカス状態を作成することは非常に重要です。デフォルトのブラウザ スタイルでは、このように設定されていますが、この動作を変更するには、次の点に注意してください。

• キーボードのフォーカスを受け取ることができる要素に outline: none を使用しないでください。
• outline スタイルを box-shadow に置き換えないでください。これらのボタンは Windows のハイ コントラスト モードでは表示されないためです。
• HTML 要素の tabindex に正の値を設定するのは、どうしても必要な場合のみにしてください。
• フォーカス状態がデフォルト状態と明確に区別されていることを確認します。

理解度を確認する

フォーカスに関する知識をテストする