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

適用 (対象)

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

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

• 達成基準 2.4.4: リンクの目的 (コンテキスト内) (書かれていない達成方法を満たす手段として十分)
• 達成基準 2.4.9: リンクの目的 (リンクのみ) (書かれていない達成方法を満たす手段として十分)

解説

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

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

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

事例

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

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

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

<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>

参考リソース

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

• HTML5 Accessibility Chops: hidden and aria-hidden
• CSS in Action: Invisible Content Just for Screen Reader Users

関連する達成方法

• G91: リンクの目的を説明したリンクテキストを提供する
• H33: title 属性を用いて、リンクテキストを補足する

検証