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

達成方法に関する重要な情報

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

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

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

解説

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

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

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

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

注記

2 色フォーカスインジケータの CSS が優先されると断定可能な場合は、検証は各インターフェースコンポーネントを手動でフォーカスする代わりに機械的に行うことができる。

関連リソース

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

事例 1: 明暗のある点線のインジケータ

説明

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

暗いアウトラインと明るいテキストシャドウを組み合わせた例

事例 2: 太めの明暗のあるインジケータ

説明

*: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;
}

暗いアウトラインと明るいテキストシャドウを組み合わせた例

関連リソース

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

検証

手順

フォーカス可能なユーザインタフェース要素それぞれに対して:

  1. フォーカスインジケータの 2 色が隣接しており、コントラスト比が 3:1 以上であることを確認する

期待される結果

  • #1 が真である。