WCAG 2.2の達成基準2.4.9「リンクの目的（リンク単体）」は、リンクの文字や代替テキストだけを読んだときに、移動先や実行内容を判断できる状態を求めるLevel AAAの基準です。
ここでいうリンクの目的とは、そのリンクを選択すると、どの情報へ移動するのか、または何が始まるのかという意味です。
「こちら」「詳細」「ダウンロード」だけでは対象が分からないため、リンク先の内容まで名前に含めます。
とくに、リンクだけを取り出して確認することがあるスクリーンリーダー利用者にとって、周囲の文章に頼らない名前は判断の手掛かりになります。
キーボードでリンクを順に移動する場合や、ページを拾い読みする場合にも、移動前に行き先を理解しやすくなります。
達成基準2.4.9が求める状態
リンク単体で目的が特定できることが基本です。
ただし、リンクの目的そのものが利用者一般にとって曖昧な場合は、例外として扱われます。
周辺の文や見出しを一緒に読めば分かるだけでは、この基準の狙いに届きません。
文脈を含めて目的を判断する基準との違いは、達成基準2.4.4「リンクの目的（文脈内）」の解説で確認できます。
- リンクの文字だけで移動先または動作が分かる
- 「詳細」のような一般的な語には、対象の名前を加える
- 画像だけのリンクでは、代替テキストで目的を示す
- リンク先自体が一般に曖昧な場合を除き、目的を特定できる名前にする
見えるリンクテキストを具体的にする
最初に検討するのは、画面に表示するリンクテキスト自体の修正です。
支援技術だけに補足を渡すのではなく、画面を読む利用者にも同じ説明が伝わります。
| 曖昧な例 | 改善例 | 改善点 |
|---|---|---|
| こちらをクリック | 会社概要を見る | 移動先を明示する |
| 詳細はこちら | 製品の詳細を見る | 詳細の対象を加える |
| ダウンロード | 最新カタログをダウンロード | 取得する内容を加える |
HTMLの改善例
「こちらをクリック」では、リンクだけを読んだときに行き先を判断できません。
<a href="/about">こちらをクリック</a>リンク先を表す「会社概要」を名前に含めれば、周囲の文章がなくても目的が伝わります。
<a href="/about">会社概要を見る</a>リンクテキストは、長くすること自体が目的ではありません。
判断に必要な対象と動作を、短く具体的に示します。
画像リンクはalt属性で目的を伝える
画像だけがリンクになっている場合は、その画像の見た目ではなく、リンクを選んだ結果が分かる代替テキストを設定します。
alt属性がない例
<a href="/download">
<img src="download-icon.png">
</a>目的を示した例
<a href="/download">
<img src="download-icon.png" alt="カタログをダウンロード">
</a>この例では「カタログをダウンロード」がリンクの名前になります。
画像の用途に応じた書き分けは、alt属性の書き方と実装例も参考にしてください。
ARIAで補足する場合の考え方
表示テキストを変更できない事情がある場合は、aria-labelやaria-labelledbyで、支援技術に渡す名前を補えます。
ただし、画面上の「ダウンロード」という文字は変わらないため、まず表示テキストを具体化できないか検討します。
aria-labelの例
<a href="/download" aria-label="最新カタログのダウンロード">
ダウンロード
</a>この例では、支援技術に「最新カタログのダウンロード」という名前が伝わります。
aria-labelledbyの例
<p id="catalog-link-label">最新カタログのダウンロード</p>
<a href="/download" aria-labelledby="catalog-link-label">
ダウンロード
</a>aria-labelledbyは、指定した要素の文字列をリンクの説明として参照します。
ARIAを使う場合は、補足後の名前をスクリーンリーダーでも確認します。
属性の役割や使い分けは、ARIAの基本と注意点で詳しく整理しています。
確認はリンク単体から始める
1. 画面上の文言を切り出して読む
リンクの前後を隠したつもりで、リンクテキストだけを読みます。
「何についての詳細か」「何をダウンロードするのか」を説明できなければ、対象の名前を加えます。
2. 画像リンクとARIAを確認する
画像だけのリンクではalt属性を確認し、リンクを選んだ結果が分かるか判断します。
ARIAで名前を補った場合は、スクリーンリーダーで意図した説明が読み上げられるか確認します。
3. 実際のリンク先と照合する
分かりやすく見える名前でも、実際の移動先や動作と一致していなければ目的を正しく伝えられません。
リンクを開き、名前が案内した内容と移動先を照合します。
4. 自動検査は候補の発見に使う
AxeやWAVEなどの自動検査ツールは、ラベルがないリンクや確認が必要な箇所を探す補助に使えます。
結果だけでリンク名の適切さを断定せず、リンク単体の文言と実際の移動先を人が確認します。
よくある質問
「こちら」や「詳細」は使えませんか
その語だけで目的を特定できない場合は、この達成基準を満たしにくくなります。
「料金プランの詳細を見る」のように、対象を含めてください。
リンクテキストは長いほどよいですか
必要以上に長くする必要はありません。
リンク先または動作を区別できるだけの具体性を持たせます。
aria-labelを追加すれば十分ですか
ARIAは、表示テキストを変えにくい場合の補足手段です。
画面上の文字が曖昧なままになるため、可視のリンクテキストを直せる場合は、そちらを先に検討します。
実装時に押さえるポイント
- リンク単体で移動先または動作が分かる名前にする
- 「こちら」「詳細」「ダウンロード」には対象を加える
- 画像だけのリンクでは、alt属性で目的を示す
- ARIAを使った箇所は、支援技術で補足後の名前を確認する
- 自動検査に加えて、リンク名と実際の移動先を手動で照合する
リンクの名前を具体的にすると、利用者は移動前に行き先を判断しやすくなり、不要な移動や選択の迷いを減らせます。
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
リンクの分かりやすさを含め、サイト全体のアクセシビリティ改善にご関心がある方は、サービスの詳細をご覧ください。