JIS X 8341-3:2016 を読み解く 2.4.4 リンクの目的（コンテキスト内）の達成基準

JIS X 8341-3:2016 における、「2.4.4 リンクの目的（コンテキスト内）の達成基準」の原文は下記の通りです。

この達成基準は、例えば視覚障がいのある人が、支援技術によって読み上げられるリンクの一覧から各リンクの目的を正確に判断し、自分が行きたい場所に移動することを容易にします。

また、リンクの目的が明確なことで、利用者は求めていないリンクを誤って操作し、その都度元の場所に戻って操作をやり直すといった煩わしさを排除します。

適合レベルは「A」に分類されています。

簡単な解説

利用者がそのリンク先へ行きたいかどうかを決めることができるように、各リンクの目的を理解しやすくします。リンクテキスト（a 要素内に記述されるテキスト）にはできる限りその目的、つまりそのリンクを操作することによって何が起こるのかが理解できる文言を選択することで、利用者はリンクの一覧からの選択が容易になります。

達成基準では、リンクテキストとコンテキスト（文脈）から判断できるようにとされていますが、同ガイドライン内には「2.4.9 リンクの目的（リンクだけ）の達成基準」（適合レベル AAA）が存在し、リンク単体での目的の明確化が求められていることから、「2.4.4」のみを対象とする場合でも、できるだけ前後の文脈に依存せず、リンクテキスト単体でその目的が理解できることが望ましいでしょう。

下記のようなリンクでは、リンクの目的を理解するのが難しくなります。

<!-- 間違った例 -->
<p>詳しくは下記をご覧ください。</p>
<ul>
  <li><a href="page-01.html">詳細</a></li>
  <li><a href="page.pdf">PDF</a></li>
  <li><a href="page-3.html">動画</a></li>
</ul>

各リンクテキストを、リンク先のコンテンツが想像しやすい内容に変更します。また、見出しを適切に設定するなど、前後の文脈にも配慮すると、全体としてリンクの目的はより理解しやすくなります。

<!-- 正しい例 -->
<h2>第2回 強化合宿の開催について</h2>
<p>詳しくは下記をご覧ください。</p>
<ul>
  <li><a href="page-01.html">第2回 強化合宿 募集要項</a></li>
  <li><a href="page.pdf">第2回 強化合宿 参加申込書（PDF形式 / 20KB）</a></li>
  <li><a href="page-3.html">第2回 強化合宿で利用する施設の紹介動画</a></li>
</ul>

画像のみが含まれるリンクは、画像に対してリンクテキストとなる代替テキストを提供します。

<p>
  <a href="page.html">
    <img src="img/image.png" alt="春のオススメ商品特集ページ">
  </a>
</p>

下記のようなリンクは文脈からリンクの目的は判断可能と解釈できるものの、単体ではリンクの目的が不明瞭になるため、できる限り避けるべきです。

<!-- 間違った例 -->
<p>
  応募方法について詳しくは
  <a href="page.html">こちら</a>
</p>

前述の通り、できる限りリンクテキスト単体でリンクの目的が明確になるようにしましょう。

<!-- 正しい例 -->
<p>
  <a href="page.html">応募方法について詳しくはこちら</a>
</p>

あるいは、そのリンクテキストに対して「行動」を促すテキストを指定するのもよいでしょう。

<!-- リンクテキストを調整した例 -->
<p>
  <a href="page.html">応募方法について詳しく見る</a>
</p>

例えばデザインの都合上、前後の記事へのリンクテキストとして「前の記事」「次の記事」といった短いテキストだけを使用したい場合もあります。その場合は、title 属性や aria-label 属性を用いて、リンクテキストを提供することも可能です。

<!-- title 属性の利用例 -->
<ul>
  <li>
    <a href="prev.html" title="前の記事：第2回 強化合宿の開催について">
      前の記事
    </a>
  </li>
  <li>
    <a href="next.html" title="次の記事：第3回 強化合宿における合宿候補地の選定について">
      次の記事
    </a>
  </li>
</ul>

この方法は、例えばブログやニュースサイトのように記事の一覧が表示されているページにおいて、各記事ごとに「続きを読む」といった同じリンクテキストを持った記事ページへのリンクが羅列されてしまうような場合に、それぞれのリンクに title 属性やaria-label 属性を用いて、適切なリンクテキストを提供するような用途でも使用できます。

また、リンク先が同じリンクは、一貫したリンクテキストを持つことが重要です。例えば同じウェブページにリンクしているにも関わらず、場所によって異なるリンクテキストを持つリンクが存在すると、利用者を混乱させる要因となります。

<!-- リンク先が同じなのにリンクテキストが異なると利用者を混乱させる -->
<a href="product.html">製品一覧</a>
...
<a href="product.html">プロダクトページ</a>

これは、アクセシビリティ上の問題はもちろん、ウェブサイト内で使用される用語の一貫性という面から、ユーザビリティ上の問題も生じさせます。