CSS ポッドキャスト - 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には、どうしても必要な場合にのみ正の値を設定してください。 - デフォルトの状態と比べてフォーカス状態が明確であることを確認してください。
理解度チェック
集中力の知識をチェック
自動的にフォーカス可能な要素は次のうちどれですか。
<a><p><button><input><output><select>フォーカスを設定できる入力デバイスは次のうちどれですか。