「詳しくはこちら」を見直す、行き先が伝わるリンクの書き方

リンクを押す前に知りたいこと

ページを読んでいて「詳しくはこちら」というリンクに出会うと、何について詳しく分かるのかを、前後の文章から探すことがあります。同じ表現が並んでいると、違いを把握する手間も増えます。

たとえばイベント案内に、申し込み、会場へのアクセス、当日の持ち物という三つのリンクがあるとします。それぞれが「こちら」だけなら、読者は対応する説明を読み直す必要があります。

「イベントに申し込む」「会場へのアクセス」「当日の持ち物を確認する」と書けば、行き先やそこでできることが伝わります。リンクを押したあとに予想外のページが出ることも減らしやすくなります。

これは文言の長さを競う話ではありません。そのリンクを選ぶ理由が分かるかが、見直すときの基準です。

「こちら」がすべて不適合になるわけではない

W3CのWCAG 2.2「文脈におけるリンクの目的」の解説では、リンク自体の文言、またはプログラムで関連付けられる文脈と合わせて、リンクの目的を判断できることが示されています。この記事では、達成基準2.4.4の考え方を扱います。

同じ文や段落などの情報から目的が分かる場合もあるため、「こちら」という語があるだけで、すべて不適合だと判断するのは適切ではありません。

一方、スクリーンリーダーにはリンクを一覧にして移動する使い方があります。周囲の説明を毎回たどらなくても目的が分かる文言は、そのような場面でも役立ちます。

画面上で近くに見えるだけでは、情報同士の関係が十分に伝わらない場合もあります。見た目の配置と、読み上げられる順序の両方で確認すると、気づきやすくなります。

行き先の名前を、必要な分だけ入れる

まず、リンク先の内容を短く説明できるかを考えます。ページの正式名称が長すぎるなら、読者が識別するために必要な部分を残します。

以下は、文言を見直すための仮例です。どのサイトにも同じ文字列を当てはめる必要はありません。

PDFなど通常のページ閲覧と動作が異なる場合は、その違いも判断材料になります。ただし、表にある「PDF」の追記自体を、達成基準2.4.4が一律に要求しているという意味ではありません。

リンク先の見出しとも言葉をそろえると、移動した読者が「目的のページに着いた」と判断しやすくなります。「料金を確認する」というリンクの先が問い合わせフォームなら、文言か行き先のどちらかを見直したいところです。

同じ名前のリンクを並べて確かめる

サイト内のすべてのリンクを一度に書き換える必要はありません。まず、案内が多い一ページを選び、リンクの文言を順に拾ってみます。

同じ「詳細」が複数ある場合は、リンク先も同じか、それぞれ別の内容かを確かめます。別の行き先なら違いを表し、同じ目的なら呼び方が不必要にばらついていないかを見ます。

次に、キーボードでリンクへ順に移動します。選択中のリンクが分かるか、移動する順序が自然かも一緒に確認します。文言が分かりやすくても、今どこを操作しているか分からなければ選びにくいためです。

可能なら、スクリーンリーダーのリンク一覧でも聞いてみます。この確認だけでページ全体のアクセシビリティーを判定できるわけではありませんが、似たリンクが並ぶ問題を見つける助けになります。

読者が選べる言葉にする

リンクを見直すときは、単に「こちら」を別の語に置き換えるより、読者が何を期待して押すのかを考えるほうが有効です。行き先の内容と、そこでできることを短く表してみてください。

画像がリンクになっている場合には、代替テキストも関係します。画像の役割に合わせた考え方は、画像の代替テキストの書き方で説明しています。