はじめに
- はじめて本ウェブサイトを見る方へ
- 利用上の注意事項
ガイダンス
基本デザイン
コンポーネント
リソース

リンクテキスト

2024年6月19日更新

概要

リンクテキストは通常、色や下線などの視覚的な表現で通常のテキストと区別され、URLと関連づけられたテキスト文字列です。この関連付けをハイパーリンクと呼び、これはウェブをウェブたらしめている基本的な概念のひとつです。

リンクには大きく「内部リンク」「外部リンク」があり、外部リンクを新しいタブ（またはウィンドウ）で開くようなリンクターゲットの設定とする際は、アイコンを付与するなど視覚的に内部リンクと異なる表現がなされることがあります。

内部リンクと外部リンクの違い

何をもって内部・外部とするかについて、標準的な観点としては、関連づけられたURLが同じドメインのものか否かで判断されますが、実際の運用にあたってはウェブサイトごとのポリシーに依存することに注意してください。

たとえば、SaaSサービスによる問合せフォームを設置するような場合、問合せフォームはウェブサイト本体とは異なるドメインに展開されることがありますが、この問合せフォームへのリンクを内部リンクとして扱うことに問題はありません。

ウェブサイトやサーバのサービス上の規約、Cookie等の技術仕様におけるドメインの扱い、アクセス解析上の分析単位、所有や管理に関する法的な取扱いなどによって、内部・外部の境界が異なる場合があります。

リンクテキストの基本構造

スクリーンショット：リンクテキストの３つの参考例。上段から文中のインラインのリンクテキスト例、リンクテキスト部分は青色で青色の下線が追加。その他の文は黒文字で下線無し。中段、一般的なリンク文が独立したリンクテキスト例、リンクテキストは青文字で青色の下線が追加。下段、一般的なリンク文が独立したリンクテキストの最後尾に外部へのページ遷移を示すアイコンが追加されている例、リンクテキスト、アイコンは青色で、リンクテキストに青色の下線が追加されている。

リンクテキストは、通常のテキストから明確に区別できるようにします。通常のテキストとは異なる色と下線やその他の視覚的な手段を組み合わせてフォーカス可能なインタラクティブ要素であることを示します。

なお、外部リンクや新しいタブを開くリンクの時に、リンクテキストの末尾に配置されるアイコンには、下線はひかれませんがクリッカブル領域には含まれます。

リンクカラー（リンクテキストの色）

リンクカラーを選定する場合、最も重要な観点は、リンクの色が簡単に区別でき、かつ適切なコントラスト要件を満たしているとともに、ウェブサイト内で一貫性をもっていることです。また、コントラストだけでなく、色覚多様性も考慮してください。

スクリーンショット：色覚多様性を考慮したリンクテキスト色の参考例として、一つの濃いグレー色のテキストと４種類の青色のテキストをC型色覚、P型強度、D型強度での見え方の違いを表示。上段、濃いグレーのテキスト表示はD型では若干明るく表示され、コントラストが弱まる。２段目、濃い青色のテキスト表示はP型、D型でやや明るい青色に変更され、D型で最もコントラストが弱い。３段目は２段目の濃い青色よりやや明るい青色のテキスト。P型、D型で青色がやや明るく表示され、D型で最もコントラストが弱まる。４段目、明るい青色のテキスト。P型、D型でほんの少し色が薄くなる。５段目、４段目の青色テキストよりも若干明るい青色テキスト。C型、P型、D型でほとんど変わりは無い。

このリンクテキスト色の参考例は、C型色覚を基準としてP型強度とD型強度での見え方をシミュレーションしたものです。これらシミュレーション結果の色そのものに見えると解釈するのではなく、色の見分けがつくかつかないかといった観点で検証し、色覚特性を考慮してください。

論理的、または科学的根拠に基づいた最良のリンク色として特定されている色はありません。ただし、ウェブの伝統的な慣習から未訪問のリンクを青、訪問済みのリンクをマゼンタとすることが最も一般的です。この組み合わせは、ブラウザのデフォルトスタイルにも採用されているほか、GoogleやMicrosoftがリンクカラーの検証をして青の色味を決定するなど、実証されたカラーであるといえます。
色情報が欠落してもリンクであることがわかるように、必ず、色以外のテキスト装飾等の要素と組み合わせて使用してください。下線が最も一般的です。ほかに、ビュレットや矢印等のリンクマークをつけるパターンもあります。
なおこれは、青以外の色相をリンクカラーにすることを禁止するものではありません。たとえばブランドカラーをキーカラーとして設定している場合において、リンクカラーがブランドカラーの色相から選定されることがあります。しかしながら、青以外のリンクカラーとなる場合、コントラスト要件および色覚多様性のほか、ユーザーが迷いなくリンクであると認識できるように配慮してください。

リンクのステート

リンクテキストはリンクカラーを変更することで、ユーザーにリンクのステート（状態）を示すことができます。たとえば、未訪問のリンクカラーと訪問済みのリンクカラー（Visited）を変えることで、ユーザーはどのリンクが閲覧済みかどうかを簡単に把握することができます。また、Hover（リンクの上にマウスカーソルが重なっている状態）やActive（リンクに対してマウスボタン押下中の状態）でリンクカラーや装飾等の表現を変えることで、ユーザーの操作に対する視覚的なフィードバックを提供できます。

スクリーンショット：リンクテキストの各ステート一覧図。上段から、Defaultの表示：青色のリンク文字「デジタル社会の実現に向けた重点計画」の最後尾に外部リンクを示す青色のアイコン。リンク文字とアイコン全体に青色の下線が追加されている。Focusの表示：リンクテキスト、アイコン、下線の青色はデフォルト時と同じで、全体を囲む黒色の外枠線と全体に黄色の背景色が追加される。Hoverの表示：Defaultのリンクテキスト、アイコン、下線の青色が若干明るくなり、下線がデフォルト時に比べ若干太くなっている。Activeの表示：Defaultのリンクテキスト、アイコン、下線が全てオレンジ色に変更されている。Visitedの表示：Defaultのリンクテキスト、アイコン、下線が全て赤紫色に変更されている。

Hoverの表現は、リンクカラー、下線、背景色を変更するなどしてサイト全体のトーン＆マナーとの関係の中で相応しい表現を選択してください。
Hoverで文字の太さや大きさを変化させることで、文字領域のサイズが変わり視覚的ながたつきが生じることがあります。UIやレイアウトとの関係性を鑑みて、文字領域のサイズ変化が他の要素に影響を与えない場合のみ使用します。
Visitedには適切なリンクカラーを設定して未訪問と訪問済みのリンクが明瞭に区別できるようにします。これにより、ユーザーはどのリンク先のコンテンツや資料を表示したかが目視のみで容易に把握することができ、特に、数多くのリンクが表示されている場合に有用な表示となります。

新規タブを開くリンク、ウェブページ以外へのリンク

ブラウザの新規タブ（または新規ウィンドウ）を開くリンクには、リンクテキスト末尾にアイコンを配置してその旨を喚起します。サイトごとのポリシーに従って、どういったリンクの場合に新規タブを開くリンクとするかを決定してください。たとえば本ウェブサイトでは、https://design.digital.go.jp/ 配下以外のリソースへのリンクは、原則として新規タブを開くリンクとして扱っています。

また、PDF文書やダウンロードファイル等、ウェブページ以外へのリンクを示す場合は、リンクテキストにファイル形式や容量などを明記すると分かりやすいでしょう。

スクリーンショット：外部リンクやリンクされているドキュメントのファイル形式を示すアイコンの使用例二つ。上段、「法令の検索」の下線付きのリンクテキストの最後尾に外部リンクを示すアイコンが追加されている。リンクテキスト、アイコン、下線は全て青色で表示。下段。「紹介パンフレット（PDF:100KB、内閣府）」の下線付きのリンクテキストの最後尾にドキュメントタイプを示すPDFアイコンが追加されている。リンクテキスト、アイコン、下線は全て青色で表示。

新規タブで開くことを示すアイコンには「新しいタブを開きます」等の代替テキストを付与します。ウェブページ以外へのリンクの時にファイル形式をアイコンで示す場合も代替テキストが必要です。

※「新規タブを開くリンク（アイコン付き）」は、今後のアップデートでコンポーネントとして提供予定です。

レイアウト: 概要リンクテキスト: アクセシビリティ

アクセシビリティ

リンクテキストにおけるアクセシビリティ観点での留意点について説明します。

リンクの目的を明確にする

リンクテキストはユーザーがリンク先の情報が必要かどうかを判断する唯一の手掛かりとなります。リンク先の情報を具体的に判断可能なテキストをリンクテキスト自体とするようにします。

スクリーンショット：リンク文の明確さの良い例と悪い例。良い例は文中インラインの「デジタル社会の実現に向けた重点計画の詳細」がリンクテキストとして青文字に青の下線で表示され、リンクが示す具体的な内容を示している。悪い例は「もっと詳しく」のリンクテキストが主段落から切り離されて配置され、青文字に青の下線で表示されているが、何をもっと詳しくなのかの具体性を欠いている。

リンクテキスト自体を検討する場合、以下のことを念頭に置くといいでしょう。これらのすべてを満たす必要はありません。文脈的に自然なかたちで、どれかに該当するようにします。

リンク先のページタイトル（title要素）またはページの主題（h1要素）そのものである
リンク元のページ内においてユニークな文字列かどうか
リンクの目的がわかる十分な長さのあるリンクテキストになっている
リンクテキストの前後の文章から、リンク先の情報が何であるかがわかる

参考情報

達成基準 2.4.4: リンクの目的（コンテキスト内）（レベルA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
達成基準 2.4.9: リンクの目的（リンクのみ）（レベルAAA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）

「ここ」や「こちら」をリンクテキストにしない

スクリーンリーダーには、要素リストやリンク読みモードといったリンクだけを抽出して一覧する機能が備わっていたり、キーボード操作のタブフォーカスでリンクだけを順番に読み上げていくといった使い方があります。「ここ」や「こちら」だけをリンクテキストにしていると、そのリンクテキスト単体では何なのか判断できません。たとえば「資料のダウンロードフォームはこちら」という文章があった場合、「こちら」のみをリンクにするのではなく「資料のダウンロードフォーム」というリンクの目的がわかるだけの長さのリンクテキストにしましょう。「資料のダウンロードフォームはこちら」という文章全体をリンクにしても構いません。

また、たとえば記事のインデックスページで、各記事についてタイトルと記事の概要文が並んでいる時、各記事の個別ページへのリンクが「もっと詳しく」「詳細を読む」といったリンクテキストで提供されるような場合があります。この場合、リンクテキストの前後の文章から、それぞれのリンク先が想像できるものの、複数の「もっと詳しく」のそれぞれが異なる記事へのリンクとなってしまうため、リンクだけを抽出した要素リストにおいて非常に不便です。こうした場合は、記事タイトル自体をリンクテキストにすることで利便性が確保されます。レイアウトやテンプレート等の制約から、どうしても「もっと詳しく」「詳細を読む」といったユニークでない文字列をリンクテキストとしなければならない時は、aria-label属性を付与して、それらを読み上げる際に区別がつくようにします。

参考情報

F84: 達成基準 2.4.9 の失敗例－リンクテキストを具体的なテキストに変更するメカニズムなしで、「ここをクリック」又は「続きを読む」などの不明確なリンクを使用している（WCAG 2.1）

ターゲットサイズの確保

リンクテキストは、クリックやタップ可能なターゲット領域を十分に確保してください。特にインラインの隣接するターゲット領域と重複がない状態で少なくとも24×24 CSS px以上を目安としてください。

リンク領域そのものの高さが16 CSS pxなど、24 CSS pxに満たない場合でも、隣接する余白が上下に4 CSS pxずつあればターゲットサイズの確保がなされているとみなされます。ターゲットサイズのサイズ要件は細則を多く含みますので、詳細はWCAG 2.2の解説書（Understanding WCAG 2.2）を参照してください。

参考情報

達成基準 2.5.8: ターゲットのサイズ（最低限）（レベルAA）WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.2 英語）
C42: Using min-height and min-width to ensure sufficient target spacing（WCAG 2.2 英語）

リンクテキスト: 概要余白: 概要

レイアウト余白

デジタル庁新規タブで開きます

RSSフィード
プライバシーポリシー
ウェブアクセシビリティ