この記事でわかること

  • リンクの文言について、W3CのWCAGが決めている2つの基準
  • 「こちら」「詳しく」だけのリンクが使いにくい理由
  • 前後の文で補うときの置き方と、画像のリンクの代替テキスト
  • 作ったページのリンクを書き出して確かめる手順

Webページでよく見る「詳しくはこちら」のようなリンクは、目で文章を読んでいる人には分かっても、リンクだけを拾って移動する人には行き先が分かりません。この記事では、リンクの文言を分かりやすくする方法を、W3Cのアクセシビリティの基準であるWCAGをもとに紹介します。

調べたのは、WCAG 2.2と、その解説・技法のページで、確認した日は2026年10月24日です。SEOの効果や法律上の決まり、特定のツールやスクールの話は書きません。

先に結論: リンクの文字だけで行き先が分かるようにする

先に結論を書くと、リンクの文言には、行き先のページの名前やそこでできることを書きます。前後の文で補う場合は、同じ文や段落の中で、リンクより前に説明を置きます。 書き方ごとの判断は、次のとおりです。

書き方 判断
行き先の名前 よい
こちら・詳しく 避ける
URLだけ 避ける
画像だけ altで説明
同じ行き先 同じ文言

リンクの文言に関わるWCAGの基準

WCAG 2.2には、リンクの文言について次の2つの達成基準があります。

  • 達成基準2.4.4(レベルA、Link Purpose (In Context)): リンクの文言だけで、またはプログラムで結び付いた前後の文と合わせて、リンクの目的が分かるようにする
  • 達成基準2.4.9(レベルAAA、Link Purpose (Link Only)): リンクの文言だけで目的が分かるようにする仕組みを用意する

どちらにも、すべての利用者にとって目的があいまいなリンクは除く、という例外があります。W3Cの解説では、ゲームの中の「1番の扉」「2番の扉」のように、全員にとって行き先を伏せること自体が目的のリンクを例に挙げています。

「こちら」だけのリンクが困る理由

W3Cの技法F84では、画面の読み上げソフトを使う目の見えない人の多くが、ページのリンクの一覧を呼び出して、どこへ行くかを決めるとしています。その一覧が「こちら」「詳しく」ばかりだと、この使い方ができません。Tabキーでリンクを順にたどる人も、「こちら、こちら」と聞くだけでは混乱します。

達成基準2.4.4の解説では、分かりやすいリンクの文言は、体を動かしにくい人が興味のないリンクを飛ばすのにも役立つとしています。行き先のページへ行って戻る手間を省けるからです。リンクをTabキーでたどるときの確かめ方は、Webデザインでキーボードだけで操作できるかを確かめる方法で紹介しています。

前後の文で補うときの置き方

達成基準2.4.4の解説では、リンクの説明の一部を、関係のある前後の文に任せてもよいとしています。その場合、利用者がリンクからフォーカスを動かさずに目的を知れる必要があります。同じ文、段落、箇条、表のセルの中に説明を置けば、リンクと直接結び付くとしています。

説明はリンクより前に置くと使いやすくなります。W3Cの解説では、あいまいな文言を使うなら、行き先を説明する文の最後に置く方がよく、文の初めに置くと、上から順に読み上げを聞く人が混乱することがあるとしています。

画像やアイコンのリンク

W3Cの技法H30では、画像だけがリンクの中身のとき、画像の代替テキスト(alt)でリンクの働きを説明するとしています。文字と画像の両方があり、文字だけで目的が分かる場合は、画像の代替テキストを空にしてもかまいません。

反対に、画像だけのリンクで代替テキストを空にし、ほかの方法でも名前を付けていないと、W3Cの技法F89では、達成基準2.4.4・2.4.9・4.1.2を満たさない例としています。代替テキストの書き方は、Webデザインで画像の代替テキスト(alt)を書く方法で紹介しています。

手順: ページのリンクを書き出して確かめる

  1. リンクを書き出す: ページの中のリンクの文言を、上から順に一覧にします。画像のリンクは、代替テキストを書き出します
  2. 文言だけで読む: 一覧だけを見て、それぞれの行き先が分かるかを見ます。W3Cの技法F84の確かめ方も、リンクごとに、前後の文がないと目的の分からない「こちら」のような文言がないかを見る形です
  3. 前後の文を確かめる: 文言だけで分からないリンクは、同じ文や段落の中に、リンクより前に説明があるかを見ます
  4. 画像のリンクを確かめる: 画像だけのリンクの代替テキストが空になっていないかを見ます
  5. 直す: 説明が足りないリンクは、行き先の名前を文言に入れて書き直します

次のHTMLは、直す前と直した後の見本です。リンクの文言の書き方を比べるためのもので、実行するコマンドではありません。作っているページのHTMLを書き換えるときは、直す前のファイルを写して残し、直した後にもう一度リンクを書き出します。

<!-- 直す前: 「こちら」だけでは、リンクの一覧で行き先が分からない -->
<p>料金表は<a href="price.html">こちら</a>です。</p>

<!-- 直した後: リンクの文言に行き先の名前を入れる -->
<p><a href="price.html">料金表のページ</a>で、プランごとの違いを確かめられます。</p>

<!-- 画像だけのリンク: 代替テキストで行き先を説明する -->
<a href="contact.html"><img src="mail.png" alt="お問い合わせのページ"></a>

自分で直すか、相談するかの判断

判断の目安は、「リンクの文言か代替テキストを書き換えるだけで済むか」です。「こちら」を行き先の名前に替える、説明の文をリンクの前に移す、画像のリンクに代替テキストを書く、といった直し方なら、自分で直してから、リンクの一覧をもう一度作って見比べます。

記事の一覧の「続きを読む」のように、テンプレートが同じ文言のリンクをたくさん作っている場合は、テンプレートを直す必要があります。書き出したリンクの一覧を持って、サイトを作った人や、Webデザインを教えている人に、どこで文言を決めているかを聞きます。

つまずきやすいところ

  • URLをそのまま文言にする: W3Cの技法G91とH30では、行き先のURLは、一般に行き先を説明するには十分でないとしています
  • 同じ行き先で文言がばらばら: W3Cの解説では、同じ行き先のリンクは文言をそろえ、行き先の違うリンクは違う文言にすることを望ましいとしています
  • リンク先の題と合わない: W3Cの解説では、リンクの文言と行き先のページの題を合わせるか近くすると、押した後のつながりが分かりやすいとしています
  • 見出しと合わせて考えない: リンクの前の見出しも、行き先を知る手がかりになります。見出しの付け方は、Webデザインで見出しの階層を正しく付ける方法で紹介しています

まとめ

  • リンクの文言には、行き先のページの名前やそこでできることを書きます
  • 前後の文で補うときは、同じ文や段落の中で、リンクより前に説明を置きます
  • 画像だけのリンクは、代替テキストで行き先を説明し、空にしません
  • 同じ行き先のリンクは同じ文言に、行き先が違えば違う文言にします