WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR31: フォーカスのある要素の背景色又はボーダーを変更するために、スクリプトを使用する

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

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

適用(対象)

HTML 及び XHTML、CSS、Script

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

SCR31 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、コンテンツ制作者が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)">ここにフォーカスを置く</a>
...

検証

チェックポイント

  1. キーボード操作でページ内の各要素にタブ移動する。

  2. フォーカス表示が視覚的に認識可能である。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。