WCAG 2.0 実装方法集

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

-

F73: 達成基準 1.4.1 の不適合事例 - 色覚なしではリンクであることが視覚的にはっきりと分からない

適用(対象)

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

これは、次の達成基準に関連する不適合事例である:

解説

これは、色の違いを知覚できない利用者がリンクを特定できない不適合事例について述べている。リンクには、下線又は色を使わない他の視覚的な区別が必要である。リンクのなかには、ナビゲーションリンクなどのように、ページのデザインや文脈から視覚的に明らかなリンクもあるが、テキスト内のリンクはしばしば、その表示属性のみから視覚的に理解されている。こうしたリンクの下線を取り除いて色の違いだけを残すと、これがリンクであると視覚的に見分けるための他の(色以外の)識別方法がなくなるため、不適合となる。

注記 1:色以外の手掛かりが、リンクをマウスオーバーした際、又はリンクがフォーカスを受けた際にだけ提示される場合、それもやはり不適合となる。

注記 2:リンクが他のテキストとは異なる色でかつ太字にされている場合、太字は色に依存していないため、不適合とはならない。

事例

不適合となる事例 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>もし<a href="rain_in_spain.htm">スペインでの雨</a>に
関する情報を見つけたいならば、多くのリソースがある。</p>

</body>
		

注記: 視覚的な手掛かりが、(上の例のように)マウスオーバーした際のみ提供される場合、それはやはり不適合となる。

(今のところ、なし。)

検証

チェックポイント

  1. ウェブページにある文章中又は段落内(あるいは、リンクではないテキストと区別しづらいその他のエリア)のテキストにあるリンクそれぞれに、下線が付いているか、又は色(色相)に依存することなく視覚的にリンクとして区別できる(太字、イタリックなど)。

判定基準

日本語訳における注記:

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