すべてのコンポーネントで十分なコントラスト比を確保するために 2 色のフォーカスインジケータを作成する

適用 (対象)

CSS をサポートする技術を使用したコンテンツ。

これは 達成基準 2.4.7: フォーカスの可視化を理解する (十分) に関連する達成方法である。

解説

この達成方法は、どのような背景色に対しても十分なコントラストをもつ 2 色で構成されたフォーカスインジケータを作成することを目的とする。この達成方法により、異なる背景色でフォーカスインジケータを表示したときに十分なコントラストを確保するために複数のクラスを付与する必要がなくなる。

ブラウザが提供する標準のフォーカスインジケータは多くの場合は単色であるため、フォーカスの視認性は、あるコンポーネントでは高い一方、他のコンポーネントでは低くなる。例えば、フォーカスインジケータが濃い青色で、ボタンが白色の背景上にある場合は見やすいが、背景も青色の場合は見にくい。

サイト内の様々なボタンに対応するため、それぞれ固有の CSS クラスを作成することは可能であるが、これは時間がかかる上に、インタラクティブなコンテンツの種類を見逃してしまう可能性がある。しかし、フォーカスインジケータが明るい色と暗い色の 2 色から構成されていれば、どのような背景色に対しても十分なコントラストを確保することができる。現在、focus インジケータに対して text-shadow プロパティと outline プロパティを組み合わせて使うことで実現できる。

開発者は、（異なる色のコンポーネントが多数存在する等の理由で）サイトのフォーカスインジケータを把握することが困難な部分に対して、この達成方法を適用することができる。また、ナビゲーションメニューのようなサイト全体で使用され、明確なデザイン要件があり、テスト及びメンテナンスが容易なコンポーネントについては、単色のフォーカスインジケータを提供することができる。

事例

これらの例では、フォーカススタイルがすべてのリンク及び入力に適用される、シンプルな実装を示す。より複雑なウェブサイトで使用する場合は、これらのスタイルがより具体的なスタイルによって上書きされないよう、注意が必要である。

*:focus {
	box-shadow: 0 0 0px 1px white;
	outline: dotted;
}

*:focus {
	/* ensure high-contrast mode still has an indicator */
	outline: 2px transparent solid;

	/* Apply a thick yellow box-shadow with
	   a thin dark blue indicator in the middle */
	box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1;
}

関連リソース

リソースは情報提供のみを目的としており、推奨を意味するものではない。

• :focus 擬似クラス (MDN web docs)
• :focus-visible 擬似クラス (MDN web docs)

関連する達成方法

• G149: フォーカスを受け取るときに、ユーザエージェントによって強調されるユーザインタフェース コンポーネントを使用する focus
• G195: コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを使用する

検証