【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
全てのウェブコンテンツ技術
これは、次の達成基準に関連する失敗例である:
この失敗例の目的は、色の違いを認識できない人々がリンクを識別できない状況 (色覚を持つ人々がリンクを識別できる場合) を避けることである。リンクのアンダーラインや他の色に依存しない視覚的な区別が必要である (リンクが色覚を持つ人に識別可能な場合)。
ナビゲーションリンクなど、いくつかのリンクは、ページデザインや文脈から視覚的に明らかであるが、テキスト内のリンクは、しばしばそれら自身の表示属性からのみ視覚的に理解される。下線を削除し、そのようなリンクの色差のみを残すことは、それがリンクであるという他の視覚的な表示 (色以外に) がないため、失敗である。
注記 1: 赤とピンクは同じ色 (色相) だが、明度が異なる (色彩ではない)。赤とピンクは明度 (コントラスト) の差が 3 : 1 以上である限り、明度 (色彩ではない) によって異なるため、「色 (色相) のみで区別できない」という要件を満たす。(例えば、周囲のテキストが赤でリンクがピンクならば合格となる。同様に明るい緑と暗い赤は色と明度の両方で異なるため、フォーカスやポインティングする前にコントラスト (明度) の差が 3 : 1 以上の場合は通過する)
注記 2: 色覚を持つ人が知覚できない場合には、色を知覚できない人がリンクを識別できるようにするという要件はない。(例えば、ゲームやテストのようにリンクがすべての利用者に表示されない場合)。
注記 3: 色以外の手掛かりが、リンクをマウスオーバーした際、又はリンクがフォーカスを受けた際にだけ提示される場合、それもやはり失敗例となる。
注記 4: リンクが他のテキストとは異なる色でかつ太字にされている場合、太字は色に依存していないため、失敗とはならない。
ウェブページの本文のテキスト内に、多数のリンクが含まれている。これらのリンクは、下線がなく、ボディテキストに非常によく似た色で表示されている。利用者は、本文のテキストとリンクを見分けられないため、このウェブページは失敗例である。
次のコードは、文章内又は段落内のリンクから下線を取り除いていて、なおかつ色以外に別の視覚的な手掛かりを提供していない例である。
コード例:
<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. の結果が偽である場合、この失敗例の条件は適用され、コンテンツはこの達成基準の失敗となる。