WCAG 2.0 実装方法集

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

-

G195: コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを用いる

適用(対象)

全てのウェブコンテンツ技術

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

解説

この実装方法の目的は、視認性に優れたフォーカスを作ることによりブラウザのフォーカスインジケータを強調することである。多くのブラウザにおける初期値 のフォーカスインジケータは、細いドットの黒い線になっている。アウトラインを既に持っているようなフォーム要素を囲っている場合、テーブルセルの中にフォーカス要素が入っている場合、フォーカスされた要素がとても小さい場合、もしくはページの背景の色が濃い色の場合は、そのフォーカスを見ることが困難である。

この実装方法において、利用者がマウス、タブキー、矢印キー、キーボードのショートカット、もしくは他の方法を用いて要素にフォーカスを置いている時、アプリケーションは高いコントラスト比を持った色、太字、そして光を放つような視覚的インジケータを用いることによってフォーカスをより視認性のあるものにしている。

事例

事例 1: リンク

濃い背景色と明るい文字とリンクを持つウェブページがある。フォーカスがリンクにあたると、そのリンクは3ピクセルの明るい黄色のラインで囲まれる。

事例 2: フォーム要素

テーブルの中にフォームが書かれているウェブページがある。テーブルとフォームの要素の両方の境界は細くて黒い線になっている。フォーカスがフォーム要素に当たる時、その要素は部分的に透明になっている5ピクセルの赤い線で囲まれる。

事例 3: メニュー

サブメニューを持ったインタラクティブなメニューを含んだウェブページがある。利用者は矢印キーを使ってメニューの中でフォーカスを動かすことができる。フォーカスが動くと、フォーカスが当たっているメニュー項目はその背景を異なる色に変える。その色は周りの項目に対して3:1のコントラスト比を持ち、そのメニューのテキストの色と4.5:1のコントラスト比を持っている。

検証

チェックポイント

  1. マウスを用いてページ上のそれぞれのフォーカスできるユーザインターフェース要素にフォーカスを置く。

  2. 視認性に優れたフォーカスインジケータがある。

  3. キーボードを用いてページ上のそれぞれのフォーカスできるユーザインターフェース要素にフォーカスを置く。

  4. 視認性に優れたフォーカスインジケータがある。

判定基準

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

日本語訳における注記:

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