適用 (対象)
全てのウェブコンテンツ技術
これは、次の達成基準に関する達成方法である:
- 達成基準 1.4.11: 非テキストのコントラスト (十分な達成方法)
- 達成基準 2.4.7: フォーカスの可視化 (十分な達成方法)
解説
この達成方法の目的は、視認性に優れたフォーカスを作ることによりブラウザのフォーカスインジケータを強調することである。多くのブラウザにおける初期値のフォーカスインジケータは、細いドットの黒い線になっている。アウトラインを既に持っているようなフォーム要素を囲っている場合、テーブルセルの中にフォーカス要素が入っている場合、フォーカスされた要素がとても小さい場合、もしくはページの背景の色が濃い色の場合は、そのフォーカスを見ることが困難である。
この達成方法において、利用者がマウス、Tab キー、矢印キー、キーボードのショートカット、もしくは他の方法を用いて要素にフォーカスを置いている時、アプリケーションは高いコントラスト比を持った色、太字、そして光を放つような視覚的インジケータを用いることによってフォーカスをより視認性のあるものにしている。
事例
例 1: リンク
濃い背景色と明るい文字とリンクを持つウェブページがある。フォーカスがリンクにあたると、そのリンクは 3 ピクセルの明るい黄色のラインで囲まれる。
例 2: フォーム要素
テーブルの中にフォームが書かれているウェブページがある。テーブルとフォームの要素の両方の境界は細くて黒い線になっている。フォーカスがフォーム要素に当たる時、その要素は部分的に透明になっている 5 ピクセルの赤い線で囲まれる。
検証
手順
- マウスを用いてページ上のそれぞれのフォーカスできるユーザインタフェース要素にフォーカスを置く。
- 視認性に優れたフォーカスインジケータがあることを確認する。
- キーボードを用いてページ上のそれぞれのフォーカスできるユーザインタフェース要素にフォーカスを置く。
- 視認性に優れたフォーカスインジケータがあることを確認する。
期待される結果
- #2 及び #4 の結果が真である。