# 前後の文を読まないと行き先が分からない「こちら」などのリンク

Source: https://easeweb.dev/learn/link-text-alone
Topics: ボタンとリンク > リンクだけを読んでも、行き先がわかる (WCAG 2.4.9)
The fix: リンクの行き先を示す言葉を、リンクの中に入れます。「こちら」の代わりに「ホーローマグのお手入れガイド」のように項目の名前を見えるリンクのテキストに書くか、短い見える言葉を残し、その後ろに項目の名前を視覚的に隠したテキストでリンクの中に足します。
Test with: screen reader, speech input, keyboard
References: https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-link-only.html https://www.w3.org/WAI/WCAG22/Techniques/failures/F84 https://www.w3.org/WAI/WCAG22/Techniques/general/G91 https://www.w3.org/WAI/WCAG22/Techniques/css/C7 https://www.w3.org/WAI/WCAG22/Techniques/general/G189 https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html https://webaim.org/techniques/hypertext/link_text https://www.smashingmagazine.com/2022/06/voice-control-usability-considerations-partially-visually-hidden-link-names/

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

生活雑貨のショップのヘルプに、お手入れガイドのページがあります。マグの種類ごとに1行ずつ、洗い方やしまい方、避けたいことをまとめたPDFが並んでいます。担当者が編集画面でメールを書くときと同じ調子で書いたため、各行は「ホーローマグ：お手入れガイドのダウンロードはこちら（PDF、120KB）」のようになっています。上から順に読めば、どの行も分かります。

スクリーンリーダーの利用者が、トラベルマグのガイドへ直接進もうとリンク一覧を開くと、「こちら、こちら、こちら」と聞こえます。リンク一覧にはリンク自身の言葉しか表示されないため、どれがどれかを示すものがありません。利用者は一覧を閉じ、ページを1行ずつ読んで、目的のリンクを探すことになります。

「こちら」は良くないと指摘された担当者は、リンクを「お手入れガイド」という言葉に移します。行は「ホーローマグ：お手入れガイド（PDF、120KB）」となって見た目は整いますが、リンク一覧には「お手入れガイド、お手入れガイド、お手入れガイド」と並びます。同じ言葉のリンクが3つあり、それぞれ別のファイルを開きます。

## 確認できる問題

WCAGには、リンクのテキストについて2つの達成基準があります。レベルAの2.4.4「リンクの目的（コンテキスト内）」では、リンクのテキストだけでなく、プログラムによる解釈が可能なリンクの文脈と合わせて目的が分かれば十分です。文脈とは、同じ文、段落、リスト項目、表のセルにあるテキストや、ARIAでリンクに結び付けた言葉です。この例の各行はマグの名前を含むリスト項目なので、どちらの版のリンクも、おそらく2.4.4は満たします。

レベルAAAの2.4.9「リンクの目的（リンクのみ）」は、さらに、リンクのテキストだけで各リンクの目的が分かる手段を求めています。リンクのテキストだけとは、リンク一覧やTabでの移動で聞こえるもの、つまり「こちら」です。W3Cは、「click here」や「more」のような具体的でないリンクのテキストを、具体的にする手段もなく使うことを、失敗例F84として挙げています。2つ目の版は内容を表す言葉ですが、どのガイドかまでは表していません。W3Cは、目的と行き先の違うリンクには違う説明を付けるのが望ましいとしていますが、「お手入れガイド」という3つのファイルはそうなっていません。「利用者一般にとってあいまい」なリンクを除く例外も当てはまりません。どのガイドが開くかは、リンクのすぐ外で、ページ自身が示しているからです。

どちらの版も、そのまま書けてしまいます。リンクの名前は `a` 要素の中にある言葉そのもので、ブラウザーがほかのリンクや前後の文と比べることもありません。スクリーンリーダーのリンク一覧は、その名前だけを並べます。

## 利用者への影響

デザインではなく編集画面で文章を書く場所なら、どこでも起きます。ヘルプページ、お知らせ、プレスリリース、メールをそのまま載せたページ、各項目が「PDF」「ダウンロード」「詳細」で終わるダウンロードの一覧などです。英語のページでは「click here」や「here」が同じリンクです。

## 自動チェックとAIの限界

axe の `link-name` ルールは、テキストがあるため、これらのリンクをすべて合格にします。名前が同じで別のアドレスへ向かうリンクを見つける axe の `identical-links-same-purpose` はレベルAAAのタグが付いているため、通常のAとAAのタグで実行すると動きません。この診断ではIDで有効にし、見つかったものを要確認項目として記録します。同じ名前のリンクが同じ目的かどうかは、人にしか判断できないからです。「お手入れガイド」という3つのPDFが、1つのガイドの3つの言語版のこともあります。1つだけの「こちら」は繰り返されないため、このルールでは見つかりません。そこで、「こちら」や「click here」のような汎用的な名前のリンクは診断独自のチェックで拾い、同じ理由から、前後の文と一緒に要確認項目として記録します。「こちら」をアクセシブルにするよう頼まれたAIのコーディングツールは、画面の言葉を置き換える `aria-label` を付けることがあり、今度は[ラベルを含む名前](/ja/learn/label-in-name)を満たさなくなります。

## 修正前：どの行にも「こちら」

```html
<h2>お手入れガイド</h2>
<ul class="guides">
  <li>
    ホーローマグ：お手入れガイドのダウンロードは<a href="/guides/enamel-care.pdf">こちら</a>（PDF、120KB）
  </li>
  <li>
    ストーンウェア：お手入れガイドのダウンロードは<a href="/guides/stoneware-care.pdf">こちら</a>（PDF、95KB）
  </li>
  <li>
    トラベルマグ：お手入れガイドのダウンロードは<a href="/guides/travel-care.pdf">こちら</a>（PDF、140KB）
  </li>
</ul>
```

```css
.guides li {
  padding-block: 0.75rem;
  border-top: 1px solid #e3ded5;
}
```

- 各リンクのテキストは「こちら」で、行き先について何も伝えない。
- どのガイドが開くかは、リンクの前の言葉にしかない。
- リンク一覧では「こちら」が3回続く。

## 修正前：どの行にも同じ「お手入れガイド」

```html
<h2>お手入れガイド</h2>
<ul class="guides">
  <li>
    ホーローマグ：<a href="/guides/enamel-care.pdf">お手入れガイド</a>（PDF、120KB）
  </li>
  <li>
    ストーンウェア：<a href="/guides/stoneware-care.pdf">お手入れガイド</a>（PDF、95KB）
  </li>
  <li>
    トラベルマグ：<a href="/guides/travel-care.pdf">お手入れガイド</a>（PDF、140KB）
  </li>
</ul>
```

```css
.guides li {
  padding-block: 0.75rem;
  border-top: 1px solid #e3ded5;
}
```

リンクは、お手入れガイドを開くことは伝えるようになりましたが、どのガイドかは伝えません。

- マグの名前は、まだリンクの前の言葉にしかない。
- 同じテキストのリンクが3つあり、それぞれ別のファイルを開く。

## 修正後：ガイドの名前をリンクに

```html
<h2>お手入れガイド</h2>
<ul class="guides">
  <li>
    <a href="/guides/enamel-care.pdf">ホーローマグのお手入れガイド</a>（PDF、120KB）
  </li>
  <li>
    <a href="/guides/stoneware-care.pdf">ストーンウェアのお手入れガイド</a>（PDF、95KB）
  </li>
  <li>
    <a href="/guides/travel-care.pdf">トラベルマグのお手入れガイド</a>（PDF、140KB）
  </li>
</ul>
```

```css
.guides li {
  padding-block: 0.75rem;
  border-top: 1px solid #e3ded5;
}
```

1. 各ガイドの名前全体を、「ホーローマグのお手入れガイド」のようにリンクのテキストにします。リンク一覧でも、Tabでの移動でも、拾い読みする人にも、リンクだけでどのガイドが開くかが伝わります。
2. 「こちら」と、リンクに移した前の言葉を消し、同じことを行の中で二度書かないようにします。

これで二つの修正前の例はどちらも直ります。2.4.9を満たし（達成方法G91）、2.4.4もそのまま満たします。リンクのテキストはすべて違うため、axe のルールが報告するものもありません。

## 修正後：「お手入れガイド」の後ろに隠した言葉

```html
<h2>お手入れガイド</h2>
<ul class="guides">
  <li>
    ホーローマグ：
    <a href="/guides/enamel-care.pdf">お手入れガイド<span class="visually-hidden">：ホーローマグ</span></a>
    （PDF、120KB）
  </li>
  <li>
    ストーンウェア：
    <a href="/guides/stoneware-care.pdf">お手入れガイド<span class="visually-hidden">：ストーンウェア</span></a>
    （PDF、95KB）
  </li>
  <li>
    トラベルマグ：
    <a href="/guides/travel-care.pdf">お手入れガイド<span class="visually-hidden">：トラベルマグ</span></a>
    （PDF、140KB）
  </li>
</ul>
```

```css
.guides li {
  padding-block: 0.75rem;
  border-top: 1px solid #e3ded5;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
```

1. 「こちら」を、デザインがどの行にも置きたい短い言葉「お手入れガイド」に置き換えます。
2. その後ろ、リンクの中に、マグの名前を `span` で足します。リンクの名前は「お手入れガイド：ホーローマグ」となり、画面の言葉で始まります。
3. `visually-hidden` クラスで `span` を画面から隠し、各行の見た目を変えないようにします。

これで、スクリーンリーダーに対しては二つの修正前の例がどちらも直ります。2.4.9を満たし（達成方法C7。各書籍のタイトルの後ろに形式のリンクを並べ、タイトルを各リンクの中に隠すという、W3C自身の例です）、名前が画面の言葉で始まるため2.5.3も満たします。ただし、これだけでは十分ではありません。画面に見える言葉は「お手入れガイド」が3回並んだままなので、リンクを拾い読みする人や、画面拡大鏡でリンクだけを見ている人には、前と同じことしか伝わりません。

## どの方法を選ぶか

どちらも2.4.9を満たします。選ぶなら、ガイドの名前をリンクにする方法です。隠した言葉を読み上げるスクリーンリーダーの利用者に限らず、誰でもリンクだけで行き先が分かります。行の文と食い違わないよう、隠したテキストを手直しし続ける必要もありません。隠した言葉は、1つのガイドを複数の形式で配る場合のように、各項目の名前の後ろに短いリンクをいくつも並べる一覧や表に向いています。そうした一覧で項目の名前をすべてのリンクに書くと、画面に同じ名前が何度も並んでしまうからです。ただし隠した言葉を使うと、「お手入れガイドをクリック」はどの行にも一致し、Appleの音声コントロールは名前全体が必要だと報告されているため、MacやiPhoneでは番号に頼ることになるかもしれません。

## 実装の判断

**「こちら」にaria-labelは付けない。** `aria-label="ホーローマグのお手入れガイド"` は「こちら」に代わってリンクの名前になるため、名前に画面の言葉が含まれなくなり、レベルAの2.5.3「ラベルを含む名前」を満たしません。名前と照らし合わせる音声操作では、「こちらをクリック」と話しても何も見つからないことがあります。「お手入れガイド：ホーローマグ」のように表示の言葉で始まる `aria-label` なら満たしますが、ブラウザーの翻訳機能によっては翻訳されずに残るため、言葉を足すなら隠したテキストの方が安全です。この問題は[表示と名前が食い違うボタンとリンク](/ja/learn/label-in-name)で扱っています。

**説明やtitleでは直らない。** 行を指す `aria-describedby` や `title` 属性は、スクリーンリーダーが名前の後に読むことのある言葉を足しますが、リンク一覧には名前しか表示されず、「こちら」が3回続いたままです。

**長いリンクのテキストに切り替えるスイッチは満たすが、あまり役立たない。** 2.4.9は「手段」を求めているため、ページの先頭近くに、すべてのリンクを長い形に書き換えるコントロールを置けば満たします（達成方法G189とSCR30）。ただ、利用者はまずそのコントロールを見つける必要があり、ページごとに使い直さなければならないこともあります。初めから長い形で書けば、誰に対しても同じ役目を果たせます。

**同じ言葉で同じ場所なら問題ない。** メニューとフッターにある「お手入れガイド」という2つのリンクが、どちらもお手入れガイドのページを開くなら問題ありません。W3Cは、行き先が同じリンクには同じ説明を、行き先の違うリンクには違う説明を付けるのが望ましいとしています。axe のルールが報告するのは、名前が同じで別のアドレスへ向かうリンクだけで、その場合も、同じガイドの2つの形式なら目的は1つなので、最後は人が判断します。

**ファイルの形式とサイズ。** 「（PDF、120KB）」をリンクの後ろに置く書き方は多くのサイトで見られ、2.4.9には影響しません。「ホーローマグのお手入れガイド（PDF、120KB）」のようにリンクの中に入れると、リンク一覧でも、開く前にファイルだと分かります。リンクが伝える注意書きについては[新しいタブで開くことを伝えないリンク](/ja/learn/new-tab-links)、ファイル自体については[スクリーンリーダーで読めない、スキャンやタグなしのPDF](/ja/learn/accessible-pdfs)を参照してください。

**文章を書く場所で直す。** こうしたリンクはテンプレートではなく編集画面から生まれるため、コンポーネントで一度に直すことはできません。編集画面のリンク機能で「こちら」「ここ」「このページ」「click here」に警告を出し、公開前の確認にリンクのテキストを含めます。ダウンロードの一覧をデータから作る場合は、各リンクの言葉を項目の名前から取ります。

## 修正の確認

1. スクリーンリーダーのリンク一覧（VoiceOverのローター、NVDAとJAWSではInsert + F7）を開き、どのリンクも前後の文なしにどのガイドを開くかが分かることを確認する。
2. `identical-links-same-purpose` を有効にした axe か、この診断を実行し、名前が同じで別のアドレスへ向かうリンクがないことを確認する。
3. ブラウザーのアクセシビリティツリーで各リンクを確認し、名前が表示されている言葉を含み、その言葉で始まることを確認する。
4. 音声操作で「クリック」とリンクに表示された言葉を話し、そのリンクへ進むか、同じ言葉のリンクに番号が表示され、どれかを選ぶとそのリンクへ進むことを確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。編集者が新しいヘルプページを公開した際は、再度確認します。

## 制限

このサンプルは、どのページでも同じ結果になることを保証するものではありません。コード内のパスとクラス名は仮のものです。リンクの上の見出しは、リンクと同じ行の文より弱い文脈で、W3Cは2.4.4の参考の達成方法としてしか挙げていません。見出しに頼るリンクは、AAAだけでなくレベルAも満たさないことがあります。どのカードも同じ「続きを読む」で終わる並びは[どれも同じ「続きを読む」のリンク](/ja/learn/read-more)で、名前がまったくないリンクは[名前のないバナーや画像のリンク](/ja/learn/empty-links)で扱っています。実際に訪問者が使う支援技術で、ページ全体を確認してください。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）