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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

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

解説

この達成方法の目的は、CSS をサポートするユーザエージェントによって画面にレンダリングされないよう、リンクの一意の機能を記述する追加のテキストを追加し、そしてその追加のテキストをスタイリングすることによってリンクテキストを補うことである。表示されているリンクテキストの意味を理解するために、その周囲のコンテキストの情報が必要な場合、この達成方法は、不完全なテキストを表示できるようにしながら、リンクの入力目的の十分な説明を提供する。

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

この達成方法は、完全にリンクを非表示にする手段ではなく、リンク内のテキストの一部を非表示にするだけである。以下の参考リソースには、スクリーンリーダー利用者に向けてのリンクの非表示及び表示の方法が含まれている。

注記

リンクテキストを非表示にするこの達成方法は、スクリーンリーダーの利用者や企業のウェブコンテンツ制作者の一部によって支持されている。一部のウェブサイトにおいては効果があることも立証されている。しかし、結果的に説明が過度に冗長になり、熟練したスクリーンリーダーの利用者にはその冗長性を制御する能力を制約する可能性もあるため、スクリーンリーダーの利用者やアクセシビリティの専門家の中には、一般的な達成方法としてこれを推奨していない人もいる。AG ワーキンググループとしては、非表示のテキスト領域で繰り返されないコンテンツがないウェブページに対して、この達成方法は有用であると考えている。

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

事例

以下の例では、下記の CSS セレクタ及びルールセットを使用している:

.visually-hidden {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}

例 1

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


<p>Washington has announced plans to stimulate economic growth.
  <a href="#"><span class="visually-hidden">Washington stimulates economic growth </span>
  Full Story</a></p>

例 2

この事例では、異なるフォーマットの電子書籍があるリソースについて説明している。「HTML」「PDF」といったリンクのテキストの前に本の題名が付加されている。非表示にされたリンクテキストでは、各リンクの目的を説明している。

<dl>
<dt>Winnie the Pooh </dt>
   <dd><a href="winnie_the_pooh.html">
      <span class="visually-hidden">Winnie the Pooh </span>HTML</a></dd>
   <dd><a href="winnie_the_pooh.pdf">
         <span class="visually-hidden">Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
    <dd><a href="war_and_peace.html">
      <span class="visually-hidden">War and Peace </span>HTML</a></dd> 
    <dd><a href="war_and_peace.pdf">
      <span class="visually-hidden">War and Peace </span>PDF</a></dd>
</dl>

参考リソース

参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

この達成方法を使用している各 a 要素に対して:

  1. 要素の表示を 1 ピクセルに制限し、かつテキストを非表示にするその要素が定義されていることを確認する。
  2. そのクラスの要素が a 要素のコンテンツに含まれていることを確認する。
  3. a 要素の組み合わせたコンテンツがリンクの目的を説明していることを確認する。

期待される結果

  • 上記全ての結果が真である。