WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C7: リンクテキストの一部を非表示にするために、CSS を使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

CSSに対応しているウェブコンテンツ技術全て

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、CSS をサポートするユーザエージェントによって画面に表示されないよう、リンクの一意の機能を記述する追加のテキストを追加し、そして追加のテキストをスタイリングすることによってリンクテキストを補うことである。表示されているリンクテキストの意味を理解するために、その前後の内容も読む必要がある場合、この達成方法を用いることによって、リンクテキストの表示は元の状態のままでありながら、リンクに対する十分な説明を提供することができる。

この達成方法を用いるには、まず、表示させないテキストを対象とする CSS セレクタを作成する。そのセレクタの規則集合では、overflow プロパティの値が hidden に指定された縦横 1 ピクセルのボックスの中にテキストが入るようにし、さらにそのテキストをビューポートの外側に配置する指定を入れる。これによって、テキストは画面上には確実に表示されなくなるが、スクリーンリーダーや点字ディスプレイなどの支援技術に対してはアクセシブルな状態を保持できる。ここで留意すべきは、画面に表示されなくなるだけでなく支援技術に対してもそのテキストを隠してしまうという意図せぬ影響が出る恐れがあるため、この達成方法では visibility:hidden 及び display:none を使用していないことである。

注記 1: リンクテキストを非表示にするこの達成方法は、スクリーンリーダーの利用者や企業のウェブコンテンツ制作者の一部によって支持されている。一部のウェブサイトにおいては効果があることも立証されている。しかし、結果的に説明が冗長になることがある上に、熟練したスクリーンリーダーの利用者にはその冗長な説明の読み上げを制御することを要求することもありうるため、スクリーンリーダーの利用者やアクセシビリティの専門家の中には、一般的な達成方法としてはこれを推奨していない人もいる。WCAGワーキンググループとしては、同じコンテンツが非表示にしたテキストで繰り返されていないのであれば、この達成方法は有用だと考えている。

注記 2: この達成方法は、適合していないコンテンツ向けの 適合している代替版のページで解説されているスタイル・スイッチングを行う達成方法との組み合わせで使用することも可能である。詳しい情報については、C29: 適合している代替版を提供するために、スタイル・スイッチャーを使用する及び適合している代替版を理解するを参照のこと。

事例

事例 1

この事例は、各記事の概要のあとに「全文」というリンクのあるニュースサイトを示している。非表示にされたリンクテキストが、何の「全文」であるのかを説明している。

コード例:

<?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 達成方法集
</head>
<body> 
<p>ワシントンは経済成長の刺激策を発表した。
  <a href="#"> <span>ワシントンによる経済成長の刺激策の </span>
  全文</a></p>
</body>
</html>

事例 2

この事例では、異なるフォーマットの電子ブックが用意されている場合について説明している。「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. 説明を付加するテキストを提供する要素のスタイルが、1 ピクセル四方の中に収められ、かつ「overflow: hidden;」の状態で表示領域の外側に配置されるように定義されている。

  2. そのスタイルが定義されている要素がa要素の中に含まれている。

  3. a要素の中のコンテンツを組み合わせると、何へのリンクであるかの説明になっている。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。