WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C15: ユーザインタフェースコンポーネントがフォーカスを受けとったときの表示を変更するために、CSSを使用する

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

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

適用(対象)

CSS、HTML 及び XHTML

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

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

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

解説

この達成方法の目的は、インタラクティブな要素がフォーカスされたとき、又は利用者がポインティングデバイスを使ってカーソルを上にのせたときに、スタイルシートを使って視覚的なフィードバックを返すようにすることで視覚表現がどれだけ強調されるのかを示すことである。 フォーカスされた要素又はカーソルが上にのせられた要素をハイライトすることで、その要素がインタラクティブであること、又はインタラクティブな要素の範囲内であるなどの情報を提供することができる。

複数のモードに対して視覚的なフィードバックを返すことが可能な場合もある。通常、それは要素の上にカーソルをのせるためにマウスを使ったり、又は要素にタブで移動するためのキーボードを使ったりする場合である。

事例

事例 1: リンク要素

この事例では、マウスやキーボードによってフォーカスされたことを示すスタイルが、リンク部分の要素に適用される。リンク部分の要素がフォーカスを受け取ったときに背景色を適用するために、CSS が使用されている。

表示されるコンテンツは次の通り:

コード例:

<ul id="mainnav">
  <li class="page_item">Home</li>
  <li class="page_item"><a href="/services">サービス</a></li>
  <li class="page_item"><a href="/projects">プロジェクト</a></li>
  <li class="page_item"><a href="/demos">デモ</a></li>
  <li class="page_item"><a href="/about-us">会社概要</a></li>
  <li class="page_item"><a href="/contact-us">問合せ先</a></li>
  <li class="page_item"><a href="/links">関連リンク</a></li>
</ul>

マウス又はキーボードでフォーカスを受け取ったときに、上記要素の背景色を変更するCSSは次の通り:

コード例:


#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
  background-color: #DCFFFF;
  color:#000066;
}

事例 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">名前: </label>
        <input class="text" type="text" name="fname" id="fname" />
      </p>
      <p>
        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">男性</label><br />
        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">女性</label>
      <p>
    </form>
  </body>
</html>

このコードの使用例: フォーカスを受け取る要素を強調表示する例

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

フォーカスを得られる各要素に対して:

  1. マウスを使って要素の上にカーソルをのせる。

  2. 背景又はボーダーの色が変化する。

  3. キーボードでフォーカスを与える前に、マウスを動かして対象からカーソルを外す。

  4. キーボードを使って、対象の要素にタブ移動する。

  5. 背景又はボーダーの色が変化する。

  6. その要素がフォーカスを失ったとき、背景又はボーダーの色が元に戻る。

判定基準

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