フォーカス インジケーター（「フォーカス リング」とも呼ばれます）は、現在の 要素を追加します。マウスを使用できないユーザーには、 パフォーマンス指標の代わりとなるため、極めて重要 移動します。
ブラウザのデフォルトのフォーカス インジケーターがデザインと一致しない場合は、 スタイルを変更します。ただし、キーボード ユーザーを念頭に置くようにしてください。
:focus を使用して常にフォーカス インジケーターを表示する
:focus
疑似クラスは、入力に関係なく、要素がフォーカスされると常に適用されます。
フォーカスするために使用したデバイス（マウス、キーボード、タッチペンなど）や方法。たとえば
以下の <div> には tabindex があり、フォーカス可能になっています。また、
:focus 状態のカスタム スタイル:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
マウスでクリックする場合でもキーボードで
操作する場合でも
<div> は常に同じに見えます。
残念ながら、ブラウザによってはフォーカスの適用方法に一貫性がない場合があります。または どの要素がフォーカスされるかは、ブラウザやオペレーティング ありません
たとえば、以下の <button> には、:focus のカスタム スタイルもあります。
あります。
button:focus {
outline: 4px dashed orange;
}
macOS の Chrome で <button> をマウスでクリックすると、
カスタム フォーカス スタイル。ただし、カスタム フォーカス スタイルを
macOS の Safari で <button> をクリックします。なぜなら、
Safari では、要素をクリックしてもフォーカスされません。
フォーカスの動作に一貫性がないため、テストが必要になる場合があります フォーカス スタイルがユーザーに適しているかを確認します。
:focus-visible を使用してフォーカス インジケーターを選択的に表示します
新しい
:focus-visible
疑似クラスは、要素がフォーカスを受け取り、
ブラウザがヒューリスティックにより、フォーカス インジケーターを表示するかどうかを
提供します。特に、直近のユーザー操作が
キーボード経由であり、キーの押下がメタ（ALT / OPTION）を含んでいなかった
または CONTROL キーを使用した場合、:focus-visible が一致します。
以下の例のボタンは、フォーカス インジケーターを選択的に表示します。条件 マウスでクリックしたときの動作は Tab キーで移動します
button:focus-visible {
outline: 4px dashed orange;
}
:focus-within を使用して、フォーカスされている要素の親のスタイルを設定する
「
:focus-within
要素に疑似クラスが適用されるのは、要素自体が
その要素内の別の要素がフォーカスを受け取ったときに発生します。
ページの特定の領域をハイライトして、 その部分にユーザーの注意が向くようにしますたとえば、以下のフォームは、 フォーム自体が選択されているときと ラジオボタンがオンになっているときに 選択済みです。
form:focus-within {
background: #ffecb3;
}
フォーカス インジケーターを表示するタイミング
目安として、「ユーザーがこのコントロールをクリックしたのに キーボードが表示されると思いますか？」
答えが「はい」の場合コントロールにはおそらく常にフォーカスが
どの入力デバイスでもフォーカスできます。わかりやすい例が
<input type="text"> 要素。ユーザーは、アプリに入力を送信する必要があります。
その入力要素が最初に受け取った方法に関係なく、キーボードで
フォーカス インジケーターを常に表示することをおすすめします。
答えが「いいえ」の場合コントロールでは選択的にフォーカスを
表示されます。わかりやすい例は <button> 要素です。ユーザーが広告をクリックして
マウスまたはタッチ スクリーンで操作が完了すると、フォーカス インジケーターが
できます。ただし、ユーザーがキーボードで移動している場合は、
フォーカス インジケーターを表示してユーザーが後で判断できるようにする
ENTER キーまたは SPACE キーを使用してコントロールをクリックします。
outline: none を避ける
ブラウザがフォーカス インジケーターを描画するタイミングを決定する方法は、率直に言って、
混乱を招きますCSS を使用して <button> 要素の外観を変更するか、
要素。tabindex はブラウザのデフォルトのフォーカス リングの動作を
始まります
非常に一般的なアンチパターンは、次のような CSS を使用してフォーカス インジケーターを削除することです。
/* Don't do this!!! */
:focus {
outline: none;
}
この問題を回避するには、:focus と
:focus-visible ポリフィルです。以下の最初のコードブロックは、
その下のサンプルアプリで、API 呼び出しの
ボタンのフォーカス インジケーターを変更するために使用できます。
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}