CSS

:focus is a pseudo-class in CSS that allows you to style the element that is currently in focus and is useful for improving accessibility.

:focus

　CSSの:focusは、HTML要素がフォーカスされたときに適用される擬似クラスです。フォーカスされた要素は、ユーザーがタブキーを使用してフォーカスを移動するとき、または要素がクリックされたときに設定されます。例えば、ユーザーがフォーム内のテキストボックスにフォーカスを移動すると、そのテキストボックスに :focusが適用されます。

　:focusの主な目的は、アクセシビリティとユーザビリティを向上させることです。フォーカスを受けた要素には、視覚的なフィードバックが提供されます。これは、ユーザーが現在どの要素にフォーカスしているのかを明確にするために役立ちます。また、フォームの場合、ユーザーが Enterキーを押すことで、フォーカスを受けた要素の値が送信されます。

　:focusは、CSSで他の擬似クラスと同様に使用されます。以下にいくつかの使用例を示します。

CSS

/* テキストボックスにフォーカスがある場合のスタイル */
input:focus {
	border: 2px solid blue;
	outline: none; /* フォーカス時の枠線を削除 */
}

/* ボタンにフォーカスがある場合のスタイル */
button:focus {
	background-color: yellow;
	color: black;
}

　:focusは、HTML要素に適用される擬似クラスの1つであり、アクセシビリティとユーザビリティを向上させるために使用されます。この擬似クラスを使用することで、フォーカスを受けた要素に対して視覚的なフィードバックを提供することができます。また、:focusは、他の擬似クラスと同様に、CSSで使用することができます。

　:focusは、単一の HTML要素に対してのみ適用されます。また、:focusを使用する際には、アクセシビリティの問題に注意する必要があります。一部のユーザーは、マウスを使用できないため、タブキーを使用してウェブページをナビゲートすることがあります。:focusが適切に設定されていない場合、これらのユーザーはウェブページを十分に使用できない可能性があります。

　:focusを使用する際には、いくつかの注意点があります。

outlineプロパティを使用して、フォーカスを受けた要素の輪郭を明確にすることができます。ただし、多くのブラウザーは、デフォルトでフォーカス時に輪郭を表示するため、明示的に outlineプロパティを指定する必要はありません。
フォーカスを受けた要素に適用されるスタイルは、その要素がユーザーとのインタラクションに使用される場合にのみ適用することが重要です。たとえば、フォームの送信ボタンに対してフォーカスを受けたときに、背景色を変更することは適切ですが、ページのロゴに対して同じスタイルを適用することはありません。
:focusは、他の擬似クラスと同様に、クラス、ID、属性などのセレクターと組み合わせて使用することができます。たとえば、フォーム内の必須フィールドに :focusを適用する場合、次のようにすることができます。
CSS
```
input.required:focus {
	border-color: red;
}
```

　:focusは、ウェブページをよりアクセシブルにし、ユーザーフレンドリーにするために使用できる強力な CSS機能の１つです。正しく使用することで、ユーザーがページ上で何を行っているかを明確にすることができます。

　:focusを使用する場合、いくつかの具体的な例を挙げることができます。

ナビゲーションメニューのリンクに :focusを適用することで、ユーザーがどのリンクにフォーカスしているかを明確にすることができます。例えば、次のように CSSを適用することができます。
CSS
```
nav a:focus {
	color: red;
	background-color: yellow;
}
```
フォームの入力フィールドに :focusを適用することで、ユーザーがどのフィールドにフォーカスしているかを明確にすることができます。例えば、次のように CSSを適用することができます。
CSS
```
input:focus {
	border: 2px solid blue;
}
```
ボタンに :focusを適用することで、ユーザーがどのボタンにフォーカスしているかを明確にすることができます。例えば、次のようにCSSを適用することができます。
CSS
```
button:focus {
	box-shadow: 0 0 5px yellow;
}
```
リストアイテムに :focusを適用することで、ユーザーがどのリストアイテムにフォーカスしているかを明確にすることができます。例えば、次のように CSSを適用することができます。
CSS
```
ul li:focus {
	background-color: lightgray;
}
```

　以上のように、:focusを使用することで、ユーザーがページ上で何を行っているかを明確にすることができます。ただし、:focusを使用する際には、アクセシビリティに配慮し、適切なアウトラインを指定するなどの配慮が必要です。

　:focusのアクセシビリティに関して、以下のポイントに注意することが重要です。

アウトラインの指定

　フォーカスが当たった要素にはアウトラインが表示されます。しかし、ブラウザによってはアウトラインがデフォルトで非常に細く、見えにくい場合があります。そのため、明確にフォーカスしている要素がわかるように、明示的にアウトラインを指定することが推奨されています。

　例えば、次のようにアウトラインを指定することができます。

CSS

:focus {
	outline: 2px solid blue;
}

また、キーボード操作をするユーザーにとっては、フォーカスがどこに当たっているかを明確にすることが非常に重要です。そのため、フォーカスされた要素にアウトラインを明示的に指定することが必要不可欠です。

ただし、デザイン上の問題がある場合や、アウトラインを指定することで見栄えが悪化する場合には、適切な代替方法を使用することも考える必要があります。

キーボードで操作できることを保証する

　:focusを使用する際には、キーボードで操作できることを保証することが重要です。特に、マウスやタッチパッドが使えないユーザーや、タブキーを使って素早く要素間を移動するユーザーなどにとってキーボードでの操作は重要です。

　例えば、以下のように、タブキーを使用してフォーカスを移動できるようにすることができます。

HTML

<a href="#" tabindex="0">Link</a>

　このように、tabindex属性を使用して、キーボードでの操作を可能にすることができます。

　また、フォーカス可能な要素には、フォーカス時に何が起こるかを理解できるようにする必要があります。例えば、フォームの入力フィールドでは、フォーカス時にカーソルが入力フィールドに移動するようにする必要があります。

コントラスト比の確保

　フォーカスされた要素のアウトラインや背景色には、コントラスト比が十分に高いものを使用する必要があります。これによって、視覚障害を持つユーザーや、見えにくい環境下でもフォーカスされた要素が明確に認識できるようにすることができます。

:focus-withinの使用

　:focus-withinは、親要素にフォーカスが当たった場合に、その親要素内のフォーカス可能な要素全てにフォーカスが当たったことにする疑似クラスです。この疑似クラスを使用することで、親要素内のすべてのフォーカス可能な要素に同じスタイルを適用することができます。

　例えば、以下のように、親要素内にあるフォームの入力フィールドにフォーカスが当たった場合に、背景色を変更するというスタイルを指定することができます。

CSS

.parent:focus-within input:focus {
	background-color: yellow;
}

　このように、:focus-withinを使用することで、親要素内のすべてのフォーカス可能な要素に対して、同じスタイルを適用することができます。

クリック以外のフォーカスを考慮する

　フォーカスは、キーボード操作によってのみ発生するわけではありません。タブレットやスマートフォンのタッチ操作によっても、フォーカスが当たることがあります。そのため、クリック以外のフォーカスについても考慮することが重要です。

　例えば、以下のように、タッチ操作によってフォーカスが当たった場合にもアウトラインが表示されるようにすることができます。

CSS

:focus, :active {
	outline: 2px solid blue;
}

　このように、クリック以外のフォーカスにも対応することで、アクセシビリティを向上させることができます。

フォーカス可能な要素を制限する

　フォーカス可能な要素を制限することも、アクセシビリティの向上につながります。特に、モーダルウィンドウなどのように、フォーカスが限定的であるべき場合には、フォーカス可能な要素を制限することが重要です。

　例えば、以下のように、モーダルウィンドウが開かれた際に、モーダルウィンドウ内の要素にのみフォーカスが当たるように指定することができます。

CSS

.modal:focus-within *:not(.modal) {
	pointer-events: none;
}

　このように、フォーカス可能な要素を制限することで、モーダルウィンドウ内の操作性を向上させることができます。

:focus-visibleを使用する

　:focus-visibleは、:focusと同様にフォーカスが当たった場合にスタイルを指定するための擬似クラスです。ただし、:focus-visibleは、キーボードによるフォーカスやタブレット、スマートフォンによるタッチによるフォーカスに対応するために導入されたものです。

　例えば、以下のように、:focus-visibleを使用することで、キーボード操作によるフォーカスとタッチ操作によるフォーカスで異なるスタイルを適用することができます。

CSS

:focus {
	outline: none;
}
:focus-visible {
	outline: 2px solid blue;
}

　このように、:focus-visibleを使用することで、アクセシビリティを向上させることができます。

アクセシビリティのテストを実施する

　:focusを使用した場合のアクセシビリティについては、必ずテストを実施することが重要です。特に、スタイルの指定によって、アウトラインや背景色、文字色などのコントラスト比が確保されているかどうか、キーボードでの操作が可能かどうかなどを確認することが重要です。

　さまざまなユーザーにとって、操作性や視認性が向上するように、十分なアクセシビリティのテストを実施しましょう。

ベストプラクティスを参照する

　:focusを使用する際には、アクセシビリティのベストプラクティスを参照することが重要です。W3CのWeb Content Accessibility Guidelines（WCAG）は、Webコンテンツのアクセシビリティに関する国際的な標準であり、:focusに関するベストプラクティスも提供されています。

　具体的には、以下のような指針があります。

コントラスト比を確保すること
アウトラインのスタイルを指定すること
キーボードで操作できることを保証すること
フォーカスの可視性を向上するために、アニメーションを使用しないこと

　これらの指針に従い、:focusを使用する際には、アクセシビリティの観点から十分に検討し、最良の方法を選択するようにしましょう。