CSSに対応しているウェブコンテンツ技術全て
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、他のリンクとの違いを示すテキストをリンクに付加することで、リンクテキストを補完することである。ただし、付加するテキストには、CSS対応のユーザーエージェントではそのテキストが表示されなくなるようなスタイルを指定する。表示されているリンクテキストの意味を理解するためにその前後の内容も読む必要がある場合、この実装方法を用いることによって、リンクテキストの表示は元の状態のままでありながら、リンクに対する十分な説明を提供することができる。
この実装方法を用いるには、まず、表示させないテキストを対象とするCSSセレクタを作成する。そのセレクタの規則集合では、overflowプロパティの値がhiddenに指定された縦横1ピクセルのボックスの中にテキストが入るようにし、さらにそのテキストをビューポートの外側に配置する指定を入れる。これによって、テキストは画面上には確実に表示されなくなるが、スクリーンリーダーや点字ディスプレイなどの支援技術に対してはアクセシブルな状態を保持できる。ここで留意すべきは、画面に表示されなくなるだけでなく支援技術に対してもそのテキストを隠してしまうという意図せぬ影響が出る恐れがあるため、この実装方法ではvisibility:hidden及びdisplay:noneを使用していないことである。
注記1：リンクテキストを非表示にするこの実装方法は、スクリーンリーダーの利用者や企業のウェブコンテンツ制作者の一部によって支持されている。一部のウェブサイトにおいては効果があることも立証されている。しかし、結果的に説明が冗長になることがある上に、熟練したスクリーンリーダーの利用者にはその冗長な説明の読み上げを制御することを要求することもありうるため、スクリーンリーダーの利用者やアクセシビリティの専門家の中には、一般的な実装方法としてはこれを推奨していない人もいる。WCAGワーキンググループとしては、同じコンテンツが非表示にしたテキストで繰り返されていないのであれば、この実装方法は有用だと考えている。
注記2：この実装方法は、適合していないコンテンツ向けの 適合している代替バージョンのページで解説されているスタイル・スイッチングを行う実装方法との組み合わせで使用することも可能である。詳しい情報については、C29: スタイル・スイッチャーを用いて、適合している代替バージョンを提供する及び適合している代替バージョンを理解するを参照のこと。
以下の事例では、次のようなCSSセレクタ及び規則集合を使用している。
a span {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
この事例は、各記事の概要のあとに「全文」というリンクのあるニュースサイトを示している。非表示にされたリンクテキストが、何の「全文」であるのかを説明している。
コード例:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>非表示のテキストリンク｜WCAG 2.0 実装方法集</title>
</head>
<body>
<p>ワシントンは経済成長の刺激策を発表した。
<a href="#"> <span>ワシントンによる経済成長の刺激策の </span>
全文</a></p>
</body>
</html>
この事例では、異なるフォーマットの電子ブックが用意されている場合について説明している。「HTML」「PDF」といったリンクのテキストの前に本の題名が付加されている。非表示にされたリンクテキストでは、何のHTMLファイルであるのか、何のPDFファイルであるのかを示している。
コード例:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>非表示のテキストリンク</title>
</head>
<body>
<dl>
<dt>くまのプーさん </dt>
<dd><a href="winnie_the_pooh.html">
<span>くまのプーさん </span>HTML版</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>くまのプーさん </span>PDF版</a></dd>
<dt>戦争と平和</dt>
<dd><a href="war_and_peace.html">
<span>戦争と平和 </span>HTML版</a></dd>
<dd><a href="war_and_peace.pdf">
<span>W戦争と平和 </span>PDF版</a></dd>
</dl>
</body>
</html>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
この実装方法を使用している各a要素に対して：
説明を付加するテキストを提供する要素のスタイルが、1ピクセル四方の中に収められ、かつ「overflow: hidden;」の状態で表示領域の外側に配置されるように定義されている。
そのスタイルが定義されている要素がa要素の中に含まれている。
a要素の中のコンテンツを組み合わせると、何へのリンクであるかの説明になっている。
上記すべてを満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。