Skip to content

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

このテクニックについて

このテクニックは 2.4.7: フォーカスの可視化 (十分なテクニック) に関連する。

このテクニックは、HTML、CSS、スクリプトに適用される。

解説

このテクニックの目的は、コンテンツ制作者が 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>
...

検証

手順

  1. ページ内の各要素にタブ移動する。
  2. フォーカス表示が可視であることをチェックする。

期待される結果

  • 手順 2 が真である。
Back to Top