2.4.4 リンクの目的を理解できるようにする

適合レベル

A

※各レベルについては適合レベルとはをご覧ください

概要

リンクテキストや前後の文脈から、リンク先や目的がわかるようにする。リンクテキストだけを一覧化して表示する支援技術を考慮し、リンクテキストのみでリンクの目的がわかると更に良い。

詳細

この項目の目的は、ユーザーがリンク先へ行きたいかどうかを判断しやすくすることである。理解しやすいリンクテキストにすることで、一度リンク先のページに行き、また戻ってくるという無駄な操作を減らすことができる。

リンクテキストのみでリンクの目的を理解できることが一番良いが、冗長になる場合などは、リンクテキストの前方に説明を加える形でも良い。ベストプラクティスは、同じリンク先のリンクには一貫した説明があることである（関連：3.2.4 一貫した識別性を持たせる）。

改善方法の優先度について

この項目は、WCAG 2.1では達成基準2.4.9と達成基準2.4.4の2つの項目になっているものをまとめたものである。2.4.9と2.4.4には以下のような違いがある。

• 達成基準 2.4.9: リンクの目的（リンクのみ）: より良い（BESTな）改善。前後の文脈を含めずに、リンクテキストのみでリンクの目的を理解できることが望ましいとされている
• 達成基準 2.4.4: リンクの目的 (コンテキスト内): 良い（BETTERな）改善。そのリンクテキストのみで理解できない場合、具体例に示すように、マークアップで関連づけられているテキストの内容から、リンクの目的がわかれば良い

特に恩恵を受けるケース

• 関心のないリンクテキストをスキップできるようになり、一度リンク先に遷移して戻ってくるという無駄な操作をしなくて済む
• スクリーンリーダーなどの支援技術を利用しているユーザーは、リンクのみを一覧化してコンテンツを読み飛ばして使うことがある
• クローラーはリンク先とリンクテキストのキーワードを関連づけて評価することがある

具体例

記事一覧モジュールに付随する「もっと見る」というテキストリンクでは、以下のような対応方法が考えられる。

より良い改善方法

• リンクテキストが、リンク先のページタイトルと一致している
• 「新着記事をもっと見る」など、リンクテキスト自体に目的語を含める（以下の図のGood例またはより良い実装例1）

良い改善方法

• リンクの目的を説明するテキストを同じ段落に置く（良い実装例2）
• 同じセクションの見出しテキストで説明する（良い実装例3）
• aria-label属性で、スクリーンリーダーによる読み上げを補足する（良い実装例4）

実装方法

上記具体例を実装例で示す。このガイドラインでは、上から順により良い実装方法とする。

※わかりやすさのため、「良い実装例3」でのみ見出しタグを用いているが、ガイドラインの他の項目を考慮すると「より良い実装例1」と「良い実装例3」を組み合わせるのがもっとも良い実装パターンである。（具体例のGood例に該当）

より良い実装例1

「新着記事をもっと見る」など、リンクテキスト自体に目的語を含める。

<section>
  新着記事
  <ul>（中略）</ul>
  <a href="/new">新着記事をもっと見る</a>
</section>

良い実装例2

リンクテキストの目的を説明するテキストを同じ段落に置く。

<section>
  新着記事
  <ul>（中略）</ul>
  <p>新着記事を<a href="/new">もっと見る</a></p>
</section>

良い実装例3

同じセクションの見出しテキストで説明する。

<section>
  <h2>新着記事</h2>
  <ul>（中略）</ul>
  <a href="/new">もっと見る</a>
</section>

※スクリーンリーダーの組み合わせによっては、フォーカスを動かさないまま見出しの内容を確認できない。見出しジャンプ機能などの組み合わせで把握できるが、良い実装例2の方がより良い改善となる。

良い実装例4

aria-label属性で、スクリーンリーダーによる読み上げを補足する。

<section>
  新着記事
  <ul>（中略）</ul>
  <a href="/new" aria-label="新着記事をもっと見る">もっと見る</a>
</section>

※スクリーンリーダーではリンクの目的を把握できるものの、視覚的には見出しとの関連性を確認しないとわからないため、BESTな改善とは言えない。

テスト・チェック方法

企画時、デザインレビュー、エンジニアによるレビューの工程で、リンクテキストが以下のいずれかに合致することを確認する。

1. リンクテキストだけでリンクの目的が理解できる
   • 具体例の「より良い改善方法」を参考に判断する
2. リンクテキストとマークアップで関連づけられているテキストの内容からリンクの目的が理解できる
   • 具体例の「良い改善方法」を参考に判断する
   • 実装を見ないとわからない場合、エンジニアに確認する

参考文献

• 達成基準 2.4.4: リンクの目的 (コンテキスト内) を理解する