link-text-design

リンクテキストの設計

リンク先に移動する前に、どこへ移動するのかがユーザーに伝わるリンクテキストを書きましょう。スクリーンリーダーのユーザーは、ページ上のすべてのリンクを一覧表示して移動することがよくあります。すべてのリンクが「ここをクリック」や「続きを読む」では、その一覧は役に立ちません。

基本原則

すべてのリンクは、周囲の文章や文脈から切り離して単独で読んでも意味が通じる必要があります。

ルール

リンクテキストでリンク先を説明する

• 良い例：「注文履歴を表示」
• 悪い例：「ここをクリック」
• 良い例：「アクセシビリティガイドラインをダウンロード（PDF、2.4MB）」
• 悪い例：「ダウンロード」
• 良い例：「第3四半期の業績レポート全文を読む」
• 悪い例：「続きを読む」

汎用的なリンクテキストは使わない

次のフレーズは、文脈から切り離すと何も意味しません。

• 「ここをクリック」
• 「続きを読む」
• 「詳細はこちら」
• 「ここ」
• 「これ」
• 「詳細」
• 「リンク」

このような表現を書きそうになったら、「何についての詳細ですか？」「どこのことですか？」と考えてください。その答えをリンクテキストにします。

同じテキストなら、リンク先も同じにする

同じテキストのリンクが2つある場合、リンク先も同じでなければなりません。異なるページに移動する「詳細はこちら」というリンクが2つあると、誰にとっても混乱を招き、スクリーンリーダーのユーザーにはわかりにくくなります。

リンク先が異なるなら、テキストも変える

異なる場所に移動するリンクは、テキストも異なる必要があります。

• 悪い例：「詳細を表示」／「詳細を表示」（異なる製品に移動）
• 良い例：「スタンダードプランの詳細を表示」／「プロプランの詳細を表示」

特別なケース

新しいウィンドウまたはタブで開くリンク

• ユーザーに警告します：「ポリシーを表示（新しいタブで開きます）」
• または、代替テキスト付きの外部リンクアイコンを表示します

ファイルへのリンク

• ファイル形式とサイズを明記します：「年次報告書（PDF、3.1MB）」
• これにより、ユーザーはダウンロードを開始する前に判断できます

本文中のリンク

• リンクテキストには、文全体ではなく意味のあるフレーズを使います
• 良い例：「対応言語の一覧をすべて確認」
• 悪い例：「対応言語の一覧をすべて見るには、ここをクリックしてください」
• URL自体が情報である場合を除き、URLをテキストとしてリンクにしないでください

画像リンク

• 画像の代替テキストがリンクテキストとして機能します
• リンク付きロゴ：alt="会社名 — ホームページ"
• リンク付きアイコン：アイコンではなく、操作内容を説明する代替テキスト

評価チェックリスト

• すべてのリンクは、単独で読んでも意味が通じる
• 「ここをクリック」や「続きを読む」といった汎用的なリンクがない
• 同じリンクテキストは、常に同じリンク先を示している
• ファイルへのリンクに形式とサイズが記載されている
• 新しいウィンドウで開くリンクに警告がある
• 画像リンクに内容を説明する代替テキストがある