Webアクセシビリティ達成基準「2.4.4 リンクの目的（コンテキスト内）」とは？適切なリンクテキストの付け方を解説

前回はWebアクセシビリティ達成基準「2.4.3 フォーカス順序の達成基準」について解説しました。続けて今回は「2.4.4 リンクの目的（コンテキスト内）の達成基準」への対応について解説します。

Webサイトを閲覧していると、「詳しくはこちら」「詳細を見る」といったリンクをよく見かけます。普段はあまり意識しないかもしれませんが、リンクのテキストは、利用者がリンク先の内容を理解するための重要な手がかりです。

特に、スクリーンリーダーなどの支援技術を利用している方にとって、リンクの目的が分かりにくいと、目的のページを探すことが難しくなる場合があります。

2.4.4 リンクの目的（コンテキスト内）とは？

リンク先の内容が分かるようにする

「2.4.4 リンクの目的（コンテキスト内）」は、Webアクセシビリティの国際的なガイドラインであるWCAG 2.1の達成基準の一つです。適合レベルはAAに分類されています。

この基準では、リンクの目的を、リンクテキストそのもの、またはリンクテキストとその周辺の文脈から判断できるようにすることが求められています。

例えば、次のようなリンクがあったとします。

• 詳しくはこちら
• こちらをクリック
• 詳細を見る

これらの表現は、リンク先の内容が分からないため、単独で見ると利用者が目的を判断しにくくなります。

一方、次のように書けばどうでしょうか。

• Webアクセシビリティへの取り組みについて詳しく見る
• 会社概要はこちら
• 採用情報・募集要項を見る

リンク先の内容が具体的になり、利用者はリンクをクリックする前に、どのような情報が得られるのかを判断しやすくなります。

ただし、この達成基準では、必ずしもリンクテキストだけで目的が分かる必要はありません。リンクの前後にある文章など、プログラムで判断できる文脈と組み合わせて目的が理解できる場合も認められています。

2.4.4への対応で注意したいポイント

「詳しくはこちら」を使う場合は周辺の文章が重要

Webサイトでは、デザインや文章の流れを考慮して「詳しくはこちら」という表現を使うことがあります。

例えば、次のようなケースです。

「当社のサービス内容については、こちらをご覧ください。」

この場合、周辺の文章からリンク先がサービス内容に関するページであることを判断できます。

一方、複数の情報が並んでいるページで、リンクだけが「詳しくはこちら」となっている場合は注意が必要です。

例えば、次のような構成です。

• サービス紹介　詳しくはこちら
• 会社概要　詳しくはこちら
• 採用情報　詳しくはこちら

視覚的には、それぞれのリンクがどの項目に対応しているか分かります。しかし、スクリーンリーダーでリンクだけを順番に確認した場合、同じ「詳しくはこちら」という読み上げが続き、リンク先を区別しにくくなる可能性があります。

このような場合は、リンクテキスト自体に具体的な情報を含めることが望ましいでしょう。

画像リンクには適切な代替テキストを設定する

画像そのものがリンクになっているケースもあります。

例えば、バナー画像をクリックするとキャンペーンページへ移動する場合です。

このとき、画像に適切な代替テキスト（alt属性）が設定されていないと、スクリーンリーダーではリンクの目的を理解できない可能性があります。

例えば、キャンペーンのバナーであれば、次のような代替テキストが考えられます。

「春の新生活応援キャンペーンの詳細はこちら」

画像の見た目を説明するだけでなく、リンク先で何ができるのかを伝えることがポイントです。

なお、画像と文字の両方が同じリンク先につながっている場合は、読み上げが重複しないようにHTMLの構造にも配慮する必要があります。

リンク先の内容とテキストを一致させる

リンクテキストは、実際のリンク先の内容と一致していることも重要です。

例えば、「製品カタログを見る」というリンクを設置しているのに、リンク先が会社概要のページだった場合、利用者は期待した情報を得られません。

また、「資料ダウンロード」と書かれたリンクからPDFファイルが開く場合は、必要に応じてPDFであることや資料名も明記すると、より親切です。

リンクテキストを考える際は、単に見た目や文章の自然さだけでなく、リンク先で何ができるのかを正確に伝えられているか確認しましょう。

Web制作時に確認したいチェックポイント

リンクテキストを一覧で確認する

Webサイトのアクセシビリティを確認する際は、ページ内のリンクを一つずつ確認することが大切です。

特に、次のような点をチェックしてみましょう。

• 「こちら」「詳細」「クリック」など、目的が分かりにくいリンクが多用されていないか
• 同じページ内に、同じリンクテキストで異なるリンク先が存在していないか
• 画像リンクに適切な代替テキストが設定されているか
• リンクテキストと実際のリンク先の内容が一致しているか
• 周辺の文章を含めてもリンクの目的を判断できない箇所がないか

また、HTMLの記述だけでなく、実際にスクリーンリーダーでリンクを確認してみることも有効です。リンクだけを順番に読み上げたとき、目的が分かりにくい箇所がないか確認すると、改善すべき点を見つけやすくなります。

まとめ

今回は、Webアクセシビリティ達成基準「2.4.4 リンクの目的（コンテキスト内）」について解説しました。

この基準で重要なのは、リンクを設置する際に、利用者がリンク先の内容や目的を理解できるようにすることです。

「詳しくはこちら」や「詳細を見る」といった表現がすべて問題になるわけではありませんが、リンクの周辺に十分な情報がない場合は、具体的なリンクテキストに変更するなどの工夫が必要です。

Webサイトを制作する際は、デザインや見た目だけでなく、リンクの意味や情報の伝わり方にも目を向けることが大切です。

一つひとつのリンクを見直すことが、誰にとっても使いやすいWebサイトづくりにつながります。