リンクテキスト　［テキストリンク］

リンク先が分かるようにリンクテキストを記述しているか。

解説

テキストリンクは、ユーザーがそのリンク先に行くかどうかを判断できるように、リンク先が分かるリンクテキストにします。リンクテキストだけでその判断ができないと、ユーザーは前後の文脈も確認しなければならなくなり、作業効率が低下してしまいます。

しかし、リンクテキストは、検索エンジンがリンク先のWebページのキーワードとして重視していることがあります。例えば、「ここをクリック」、「こちら」といったリンクテキストを用いると、それがリンク先のWebページのキーワードとみなされてしまいます。その点もあわせて考慮すると、リンク先のWebページを検索エンジンに対して最適化する上でも、できるかぎりリンクテキストだけでリンク先が分かるようにすることが重要です。

どうしてもリンク先が分かるリンクテキストにできない場合、「WCAG 2.0」や「JIS X 8341-3:2016」のレベルAの達成基準では、「プログラムによる解釈が可能なコンテキスト」と組み合わせてユーザーがリンク先を特定できればよいとしています。その場合は、次のいずれかでユーザーがリンク先を特定できるようにする必要があります。

  • リンクが含まれている文
  • リンクが含まれているリスト項目（<li>要素）
  • リンクが含まれているパラグラフ（<p>要素）
  • リンクの前にある見出し（<h1>～<h6>要素でマークアップされた見出し）とリンクテキストの組み合わせ
  • リンクが含まれているデータセル（<td>要素）に関連付けられている見出しセル（<th>要素）とリンクテキストの組み合わせ

これらは、スクリーンリーダーがリンクを読み上げたときに、ユーザーが何らかのキー操作をすることで確認することができる前後の文脈と組み合わせることによって、リンク先を特定できることから、レベル Aの達成基準では許容されることとなりました。

「一覧」、「詳細」、「続きを読む」といったリンクテキストを用いる場合は、少なくとも上記のいずれかに該当するようにしましょう。ただし、リンクテキストだけでリンク先が分からないというのは、やはりユーザーフレンドリーではありません。こういった方法を用いるのは、最終手段として位置付けておくのがよいでしょう。

事例 1. 文中にあるリンク

悪い例 1.


Webアクセシビリティのことなら<a href="https://weba11y.jp/">ここをクリック</a>。

リンクテキストの「ここをクリック」だけでは、リンク先がどういうページなのかが全く分からない。ただし、ユーザーはリンクが含まれている文全体を確認すればリンク先を特定できるため、WCAG 2.0のレベルAの達成基準を満たすことはできる。

良い例 1.


Webアクセシビリティのことなら<a href="https://weba11y.jp/">Webアクセシビリティ専門の情報提供サイト「エーイレブンワイ」</a>。

ユーザーは、リンクテキストだけでリンク先へ行くかどうかを判断できる。

事例 2. リスト項目にあるリンク

悪い例 2.


<li>Webアクセシビリティのことなら<a href="https://weba11y.jp/">ここをクリック</a></li>

リンクテキストの「ここをクリック」だけでは、リンク先がどういうページなのかが全く分からない。ただし、ユーザーはリンクが含まれているリスト項目（<li>要素）全体を確認すればリンク先を特定できるため、WCAG 2.0のレベルAの達成基準を満たすことはできる。

良い例 2.


<p>Webアクセシビリティのことなら<a href="https://weba11y.jp/">Webアクセシビリティ専門の情報提供サイト「エーイレブンワイ」</a></p>

ユーザーは、リンクテキストだけでリンク先へ行くかどうかを判断できる。

事例 3. パラグラフにあるリンク

悪い例 3.


<p>Webアクセシビリティを正しく理解するには、まずさまざまなユーザーの利用環境があることを理解することが不可欠です。詳しくは、<a href="https://weba11y.jp/">こちら</a></p>

リンクテキストの「詳しくはこちら」だけでは、リンク先がどういうページなのかが全く分からない。ただし、ユーザーはリンクが含まれているパラグラフ（<p>要素）全体を確認すればリンク先を特定できるため、WCAG 2.0のレベルAの達成基準を満たすことはできる。

良い例 3.


<p>Webアクセシビリティを正しく理解するには、まずさまざまなユーザーの利用環境があることを理解することが不可欠です。詳しくは、<a href="https://weba11y.jp/">Webアクセシビリティ専門の情報提供サイト「エーイレブンワイ」</a>をご覧ください。</p>

ユーザーは、リンクテキストだけでリンク先へ行くかどうかを判断できる。

事例 4. リンクの前にある見出しとの組み合わせ

悪い例 4.


<li><a href="https://weba11y.jp/">詳細</a></li>

リンテキストだけではリンク先がどういうページなのかが全く分からない。

良い例 4.


<h2>JIS X 8341-3:2016</h2>

<ul>

<li><a href="https://weba11y.jp/">詳細</a></li>

リンクテキスト「詳細」とその前にある<h2>要素の見出しにある文言「JIS X 8341-3:2016」とを組み合わせれば、ユーザーはリンク先を特定することができるので、そのリンク先へ行くかどうかを判断できる。

事例 5. リンクのあるデータセルと見出しセルとの組み合わせ

悪い例 5.


<td><a href="weba11y.pdf">Webアクセシビリティ 基本の「キ」</a></td>
<td><a href="weba11y.pdf">PDF版</a></td>

見た目には1列目が見出しセルになっているが、<td>要素でマークアップしているため、各データセルと関連付けられていないため、スクリーンリーダーでは各リンクテキストを見出しセルと組み合わせて解釈することができない。

良い例 5.


<th><a href="weba11y.pdf">Webアクセシビリティ 基本の「キ」</a></th>
<td><a href="weba11y.pdf">PDF版</a></td>

1列目の見出しセルが<th>要素でマークアップされており、スクリーンリーダーを使用している場合でも、各データセルと同じ行の先頭にある見出しセルとが関連付けられて読み上げられるので、ユーザーはリンクテキストが同じであってもリンク先の違いを特定することができる。

WCAG 2.0の達成基準

2.4.4 リンクの目的（コンテキスト内）（レベル A）
それぞれのリンクの目的が、リンクのテキスト単独で、又はリンクのテキストとプログラムによる解釈が可能なリンクのコンテキストから判断できる。ただし、リンクの目的がほとんどの利用者にとって曖昧な場合は除く。

WCAG 2.0「ガイドライン 2.4 ナビゲーション可能」

参考