フォーカス

CSS ポッドキャスト 018: 焦点

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

これは、<main> に tabindex="-1" 属性値があるためです。 つまり プログラマティックに 焦点を絞ることができます <main> がターゲットに設定されている場合（#main-content が ブラウザの URL バーが 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" の要素よりも前にフォーカスを受け取ります。

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

要素がフォーカスを受け取ったときのデフォルトのブラウザ動作では、フォーカス リングが表示されます。 このフォーカス リングは、ブラウザとオペレーティング システムの両方で異なります。

この動作は CSS で変更できます :focus、:focus-within、:focus-visible を使用 このコースで学んだ疑似クラスについて、 疑似クラスのレッスンをご覧ください。 要素のデフォルト スタイルとのコントラストが強いフォーカス スタイルを設定することが重要です。 たとえば、outline プロパティを使用するのが一般的な方法です。

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

outline プロパティがリンクのテキストに近すぎる場合があります。 outline-offset プロパティが役立ちます。 要素が埋められるジオメトリ サイズに影響を与えることなく、視覚的な padding が追加されます。 outline-offset に正の数値を指定すると、枠線が外側に押し出されます。 負の値を指定すると枠線が内側に引かれます。

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

まとめ

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

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

理解度をチェックする

集中力のテスト