【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
CSS に対応しているウェブコンテンツ技術全て
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、CSS をサポートするユーザエージェントによって画面に表示されないよう、リンクの一意の機能を記述する追加のテキストを追加し、そして追加のテキストをスタイリングすることによってリンクテキストを補うことである。表示されているリンクテキストの意味を理解するために、その前後の内容も読む必要がある場合、この達成方法を用いることによって、リンクテキストの表示は元の状態のままでありながら、リンクに対する十分な説明を提供することができる。
この達成方法を用いるには、まず、表示させないテキストを対象とする CSS セレクタを作成する。そのセレクタの規則集合では、overflow プロパティの値が hidden に指定された縦横 1 ピクセルのボックスの中にテキストが入るようにし、さらにそのテキストをビューポートの外側に配置する指定を入れる。これによって、テキストは画面上には確実に表示されなくなるが、スクリーンリーダーや点字ディスプレイなどの支援技術に対してはアクセシブルな状態を保持できる。ここで留意すべきは、画面に表示されなくなるだけでなく支援技術に対してもそのテキストを隠してしまうという意図せぬ影響が出る恐れがあるため、この達成方法では visibility:hidden 及び display:none を使用していないことである。
注記 1: リンクテキストを非表示にするこの達成方法は、スクリーンリーダーの利用者や企業のウェブコンテンツ制作者の一部によって支持されている。一部のウェブサイトにおいては効果があることも立証されている。しかし、結果的に説明が冗長になることがある上に、熟練したスクリーンリーダーの利用者にはその冗長な説明の読み上げを制御することを要求することもありうるため、スクリーンリーダーの利用者やアクセシビリティの専門家の中には、一般的な達成方法としてはこれを推奨していない人もいる。WCAG ワーキンググループとしては、同じコンテンツが非表示にしたテキストで繰り返されていないのであれば、この達成方法は有用だと考えている。
注記 2: この達成方法は、適合していないコンテンツ向けの 適合している代替版のページで解説されているスタイルスイッチングを行う達成方法との組み合わせで使用することも可能である。詳しい情報については、C29: 適合している代替版を提供するために、スタイルスイッチャーを使用する及び適合している代替版を理解するを参照のこと。
この事例は、各記事の概要のあとに「全文」というリンクのあるニュースサイトを示している。非表示にされたリンクテキストが、何の「全文」であるのかを説明している。
コード例:
<?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>Hidden Link Text</title>
</head>
<body>
<p>Washington has announced plans to stimulate economic growth.
<a href="#"> <span>Washington stimulates economic growth </span>
Full Story</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>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
<dd><a href="winnie_the_pooh.html">
<span>Winnie the Pooh </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href="war_and_peace.html">
<span>War and Peace </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
この達成方法を使用している各 a 要素に対して:
説明を付加するテキストを提供する要素のスタイルが、1 ピクセル四方の中に収められ、かつ「overflow: hidden;」の状態で表示領域の外側に配置されるように定義されていることを確認する。
そのスタイルが定義されている要素が a 要素の中に含まれていることを確認する。
a 要素の中のコンテンツを組み合わせると、何へのリンクであるかの説明になっていることを確認する。
上記全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。