リンクの文言が「こちら」や「詳細を見る」だけでは、利用者は周囲の文章を読まなければ行き先を判断できません。
ページ内のリンクを順にたどる利用者や、スクリーンリーダーでリンクだけを確認する利用者にとっては、とりわけ大きな負担になります。
リンクの目的とは、リンクを実行したときに得られる結果です。
別のページへ移動するのか、資料をダウンロードするのか、申し込み手続きへ進むのかを、操作する前に判断できる文言が求められます。
この記事では、リンクテキストの直し方、文脈を使える条件、WCAGの達成基準、公開前の確認手順を順に整理します。
リンクの目的が伝わらないと何が起きるか
曖昧なリンクテキストは、リンク先を確かめるための余分な操作を生みます。
目的と違うページへ移動すれば、元の位置へ戻り、候補を探し直さなければなりません。
- スクリーンリーダーを利用する場合：リンクだけを一覧にして確認したとき、「こちら」が何を指すのか判断できません。スクリーンリーダーの仕組みと実装上の配慮もあわせて確認すると、リンク名が読み上げ操作にどう関わるかを理解できます。
- 文章の理解や記憶に負担がある場合：リンクと説明の対応が曖昧だと、どのリンクを選ぶべきか比較しにくくなります。
- キーボードで操作する場合：Tabキーでリンクを順に移動すると、周囲の文章を読み直さずにリンクの目的を判断できる文言が役立ちます。
具体的なリンクテキストは、特定の障害がある利用者だけのための対応ではありません。
急いで情報を探している人や、小さな画面でページを流し読みしている人も、次の操作を選びやすくなります。
曖昧なリンクテキストを具体的に直す
リンクテキストには、リンク先の内容と、必要に応じて操作の結果を含めます。
「何について」「何をする」の二点を意識すると、短くても意味の通る文言になります。
| 曖昧な文言 | 改善例 | 操作前にわかること |
|---|---|---|
詳細はこちら |
料金プランの詳細を見る |
料金の説明ページへ進む |
ダウンロード |
申込書（PDF）をダウンロード |
申込書のPDFを取得する |
もっと読む |
調査結果の続きを読む |
調査結果の記事を読む |
こちら |
営業時間を確認する |
営業時間の案内を開く |
長く説明すればよいわけではありません。
リンク先のページ名をそのまま写すよりも、利用者が選択に必要とする情報を短く示すほうが自然な場合もあります。
リンク先と操作を言葉にする
「会社案内」「予約フォーム」のようにリンク先の内容だけで目的が明らかな場合は、その名称をリンクテキストにできます。
ダウンロード、申し込み、外部サービスへの移動など、結果を予測しにくい操作では、動作も添えると判断しやすくなります。
<a href="/accessibility-guide/">Webアクセシビリティガイドを読む</a>
<a href="/files/application.pdf">申込書（PDF）をダウンロード</a>同じ行き先には一貫した文言を使う
同じページへ移動するリンクには、同じ目的だとわかる文言を使います。
同じ行き先を「製品情報」「製品をチェック」「詳細はこちら」と呼び分けると、別の情報が開くように見えるためです。
反対に、異なるページへ移動するリンクをすべて「詳細を見る」にすると、リンク同士を区別できません。
「料金プランの詳細を見る」「導入事例の詳細を見る」のように、違いをリンクテキストへ含めます。
title属性だけに説明を任せない
アクセシブルな名前は、リンクやボタンを支援技術が利用者へ伝えるための名前です。
通常のテキストリンクでは、アンカー要素の文言がその名前の中心になります。
title属性は補足に使えますが、リンクの目的を伝える主な手段には向きません。
表示方法や読み上げ方が利用環境によって異なるため、操作前に必要な情報は見えるリンクテキストへ含めます。
前後の文脈を使える条件
リンクテキストだけで目的が伝わる設計は、多くの場面で扱いやすい方法です。
ただし、WCAG 2.4.4が「すべてのリンクを必ず単独で理解できる文言にする」と定めているわけではありません。
同じ文、段落、リスト項目、表のセルなど、リンクとの関係を支援技術がたどれる文脈から目的を判断できる場合は、その文脈も利用できます。
たとえば「料金プランの比較結果をご案内します。詳細を見る」のように、対象の説明とリンクが同じ文の中で結び付いていれば、目的を判断する手掛かりになります。
見た目が近いだけでは、リンクとの関係が支援技術へ伝わるとは限りません。
複数のカードに「詳細を見る」を置く場合は、見出しの文言を各リンクに含めるか、見出しとリンクをプログラムで関連付けます。
WCAG 2.4.4と2.4.9の違い
WCAG 2.2には、リンクの目的に関する二つの達成基準があります。
どちらも利用者がリンクを選ぶ前に結果を判断できるようにする基準ですが、求める範囲が異なります。
| 達成基準 | 適合レベル | 目的を判断する手掛かり |
|---|---|---|
| 2.4.4 リンクの目的（文脈内） | Level A | リンクテキスト単独、またはプログラムで関連付けられた文脈 |
| 2.4.9 リンクの目的（リンク単独） | Level AAA | リンクテキスト単独で識別できる仕組み |
まず2.4.4を満たす構造を確認し、そのうえで可能な限りリンクテキスト単独でも意味が通る文言を選ぶと、リンク一覧やTab移動でも理解しやすくなります。
目的を意図的に伏せるコンテンツなど、一般の利用者にも行き先を判断できない場合には例外があります。
公開前に確認する手順
リンクの目的は、自動チェックだけで判断しきれません。
文言、HTMLの関係、実際の操作を組み合わせて確認します。
- リンクテキストを書き出す：リンクだけを見ても、同じページ内のほかのリンクと区別できるかを確認します。
- スクリーンリーダーでリンク一覧を確認する：「こちら」「詳細を見る」が並ばず、リンク先を予測できるかを聞き取ります。
- キーボードで順に移動する：Tabキーでリンクへ移動し、フォーカス位置が見え、目的を理解できるかを確認します。詳しい確認方法はキーボード操作とフォーカス表示の実務で解説しています。
- 見た目を確認する：本文とリンクを見分けられ、リンクであることが操作前に伝わるかを確認します。
- 行き先との整合を確認する：リンクテキストがリンク先の内容と一致し、同じ行き先と異なる行き先を適切に区別できているかを確かめます。
- title属性への依存を確認する：リンクを理解するために欠かせない情報が、
title属性にだけ入っていないかを調べます。
迷ったときは、周囲を読まなくても意味が通るリンクテキストを第一候補にします。
短くできない場合は文言を削るのではなく、リンク先を区別するために必要な語を残します。
サイト全体のアクセシビリティを改善するには
リンクテキストの改善は、小さく始められ、利用者の迷いを減らしやすい施策です。
記事一覧、ナビゲーション、商品カード、ダウンロード一覧など、同じ文言を繰り返している箇所から確認すると、修正対象を見つけやすくなります。
当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティウィジェットツールの詳細を案内しています。
サイト全体のアクセシビリティ改善を検討している方はご覧ください。