WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

HTML 及び XHTML、CSS、Script

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

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

この実装方法は:focus疑似クラスをサポートしていないがスクリプトをサポートしている、マイクロソフトのInternet Explorerを含むユーザエージェント上で用いることができる。

解説

この実装方法の目的は、コンテンツ制作者が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. フォーカス表示が視覚的に認識可能である。

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。