適用 (対象)
HTML 及び XHTML、CSS、Script
これは達成基準 2.4.7: フォーカスの可視化 (十分な達成方法) に関する達成方法である。
解説
この達成方法の目的は、コンテンツ制作者が CSS を適用してフォーカス表示を通常よりもより見やすくするために JavaScript を使えるようにすることである。要素がフォーカスを受ける時、背景色またはボーダーは視覚的に異なるように変化する。要素からフォーカスがはずれたとき元のスタイルにもどる。この達成方法は :focus 疑似クラスをサポートしているいないに関わらず、スクリプトや CSS をサポートしているどんな HTML のユーザエージェントでも用いることができる。
事例
例 1
この事例において、リンクにフォーカスが当たった時、背景は黄色に変わる。フォーカスがはずれたとき、黄色ではなくなる。もしリンクに背景色がある場合は、スクリプト内で "" よりむしろその色を用いることに注意する。
...
<script>
function toggleFocus(el)
{
el.style.backgroundColor = el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
}
</script>
...
<a href="example.html" onfocus="toggleFocus(this)" onblur="toggleFocus(this)">focus me</a>
...
検証
手順
- ページ内の各要素にタブ移動する。
- フォーカス表示が可視であることを確認する。
期待される結果
- #2 の結果が真である。