適用 (対象)
CSS、HTML 及び XHTML
これは、次の達成基準に関する達成方法である:
- 達成基準 1.4.1: 色の使用 (参考)
- 達成基準 2.4.7: フォーカスの可視化 (十分な達成方法)
解説
この達成方法の目的は、インタラクティブな要素がフォーカスされたとき、又は利用者がポインティングデバイスを使ってカーソルを上にのせたときに、スタイルシートを使って視覚的なフィードバックを返すようにすることで視覚表現がどれだけ強調されるのかを示すことである。フォーカスされた要素又はカーソルが上にのせられた要素をハイライトすることで、その要素がインタラクティブであること、又はインタラクティブな要素の範囲内であるなどの情報を提供することができる。
複数のモードに対して視覚的なフィードバックを返すことが可能な場合もある。通常、それは要素の上にカーソルをのせるためにマウスを使ったり、又は要素にタブで移動するためのキーボードを使ったりする場合である。
事例
例 1: リンク要素
この事例では、マウスやキーボードによってフォーカスされたことを示すスタイルが、リンク部分の要素に適用される。リンク部分の要素がフォーカスを受け取ったときに背景色を適用するために、CSS が使用されている。
表示されるコンテンツは次の通り:
<ul id="mainnav"> <li class="page_item">Home</li> <li class="page_item"><a href="/services">Services</a></li> <li class="page_item"><a href="/projects">Projects</a></li> <li class="page_item"><a href="/demos">Demos</a></li> <li class="page_item"><a href="/about-us">About us</a></li> <li class="page_item"><a href="/contact-us">Contact us</a></li> <li class="page_item"><a href="/links">Links</a></li> </ul>
マウス又はキーボードでフォーカスを受け取ったときに、上記要素の背景色を変更する CSS は次の通り:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}
WAIC では C15-1 に関するアクセシビリティ サポーテッド（AS）情報を提供している。2014 年 6 月版のアクセシビリティ サポーテッド（AS）情報: C15-1 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。
例 2: フォーカスを受け取った要素をハイライトする
この事例では、背景色を変更することによって、フォーカスを受け取ったときに入力フィールドのスタイルを変更するために :focus 疑似クラスが使用されている。
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00;
color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6;
color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
<p>
</form>
</body>
</html>
このコードの使用例: フォーカスを受け取る要素を強調表示する例.
参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- CSS 2: 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
- CSS 2: 5.7 Adjacent sibling selectors
セレクターに関する仕様は、Selectors Level 3 を参照のこと。この仕様が、CSS 2 のセレクターに関する記述に取って代わることに注意されたい。CSS Snapshot 2020 も参照のこと。
検証
手順
フォーカスを得られる各要素に対して:
- マウスを使って要素の上にカーソルをのせる。
- 背景又はボーダーの色が変化することを確認する。
- キーボードでフォーカスを与える前に、マウスを動かして対象からカーソルを外す。
- キーボードを使って、要素にタブ移動する。
- 背景又はボーダーの色が変化することを確認する。
- その要素がフォーカスを失ったとき、背景又はボーダーの色の変更が除去されることを確認する。
期待される結果
- 上記、#2、#5 及び #6 の結果が真である。