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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

CSS、HTML 及び XHTML

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

解説

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

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

事例

例 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">Name: </label>
        <input class="text" type="text" name="fname" id="fname" />
      </p>
      <p>
        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
      <p>
    </form>
  </body>
</html>

            

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

参考リソース

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

訳注

セレクターに関する仕様は、Selectors Level 3 を参照のこと。この仕様が、CSS 2 のセレクターに関する記述に取って代わることに注意されたい。CSS Snapshot 2020 も参照のこと。

検証

手順

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

  1. マウスを使って要素の上にカーソルをのせる。
  2. 背景又はボーダーの色が変化することを確認する。
  3. キーボードでフォーカスを与える前に、マウスを動かして対象からカーソルを外す。
  4. キーボードを使って、要素にタブ移動する。
  5. 背景又はボーダーの色が変化することを確認する。
  6. その要素がフォーカスを失ったとき、背景又はボーダーの色の変更が除去されることを確認する。

期待される結果

  • 上記、#2、#5 及び #6 の結果が真である。