適用 (対象)
全てのウェブコンテンツ技術
これは達成基準 1.4.1: 色の使用 (失敗例) に関する達成方法である。
解説
この失敗例の目的は、色の違いを認識できない人がリンクを識別できない状況 (色覚を持つ人がリンクを識別できる場合) を避けることである。リンクの下線又は他の色に依存しない視覚的な区別が必要である (リンクが色覚を持つ人に識別可能な場合)。
ナビゲーションリンクなど、いくつかのリンクは、ページデザイン及び文脈から視覚的に明らかであるが、テキスト内のリンクは、しばしばそれら自身の表示属性からのみ視覚的に理解される。下線を削除し、そのようなリンクの色差のみを残すことは、それがリンクであるという他の視覚的な表示 (色以外に) がないため、失敗である。
赤とピンクは同じ色 (色相) だが、明度が異なる (色彩ではない)。赤とピンクは明度 (コントラスト) の差が 3 : 1 以上である限り、明度 (色彩ではない) によって異なるため、「色 (色相) のみで区別できない」という要件を満たす。例えば周囲のテキストが赤でリンクがピンクならば合格となる。同様に明るい緑と暗い赤は色と明度の両方で異なるため、フォーカス又はポインティングする前にコントラスト (明度) の差が 3 : 1 以上の場合は通過する。
色覚を持つ人が知覚できない場合には、色を知覚できない人がリンクを識別できるようにするという要件はない。(例えば、ゲームやテストのようにリンクがすべての利用者に表示されない場合)。
色以外の手掛かりが、リンクをマウスオーバーした際、又はリンクがフォーカスを受けた際にだけ提示される場合、それもやはり失敗例となる。
リンクが他のテキストとは異なる色でかつ太字にされている場合、太字は色に依存していないため、失敗とはならない。
事例
事例 1:
ウェブページの本文のテキスト内に、多数のリンクが含まれている。これらのリンクは、下線がなく、本文のテキストに非常によく似た色で表示されている。利用者は、本文のテキストとリンクを見分けられないため、このウェブページは失敗例である。
事例 2:
次のコードは、文章内又は段落内のリンクから下線を取り除いていて、なおかつ色以外に別の視覚的な手掛かりを提供していない例である。
<head>
<style type="text/css">
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
</style>
</head>
<body>
<p>To find out more about the <a href="rain_in_spain.htm">rain in spain</a>there are many resources.</p>
</body>
視覚的な手掛かりが、(上の例のように) マウスオーバーした際のみ提供される場合、それはやはり失敗となる。
検証
手順
- 色 (色相) で識別可能なページ内の各リンクが、他の手段 (例えば、下線、太字、イタリック、明度の差など) によって視覚的に識別可能であることを確認する。
期待される結果
- 1. の結果が偽である場合、この失敗例の条件は適用され、コンテンツはこの達成基準の失敗となる。