焦点

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 に正の値を設定するのは、どうしても必要な場合のみにしてください。
• フォーカス状態がデフォルト状態と明確に区別されていることを確認します。

理解度を確認する

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