SSL - リンクに関する統一規格

定義

SSL規格は、リンクの意味論、アクセシビリティ、および動作ロジックに関する要件を定めています。

構造とセマンティクス

リンク要素とナビゲーション

• 別のアドレスへの移動には<a href="/destination">を使用する。画面遷移を伴わない操作には<button>を使用する。
• クリックイベントを設定した<div>や<span>でリンクを代用しない。リンク本来のセマンティクス、標準のキーボード操作、新しいタブで開く・リンクをコピーするといったブラウザー機能が失われる。

リンクの目的とテキスト

• リンクの目的は、リンクテキスト単独、またはプログラム上関連付けられた文脈と合わせて判断できる必要がある。「詳しくはこちら」などの表現は、周囲の文脈から遷移先が明確な場合に限って使用する。
• リンクテキストには遷移先または操作内容を示す。title属性は補足情報として使用できるが、意味の分かるリンクテキストの代わりにはならない。利用可能性や表示方法は、端末や操作方法によって異なる。
• アイコンまたは画像だけで構成されるリンクには、リンクテキスト、視覚的に隠したテキスト、またはaria-labelでアクセシブルな名前を設定する。画像にはaltも指定する。aria-labelは可視ラベルがない場合に使用し、既存のリンクテキストを不必要に置き換えない。装飾アイコンはスクリーンリーダーから隠す。

URLのアドレスと構造

• 内部遷移には/aboutのような相対URLを使用できる。外部リソースには完全なURLを指定し、HTTPSが利用可能な場合はhttps://を優先する。

• URLは遷移先で採用されている正規形式に合わせる。末尾の/を一律に追加・削除しない。適切な形式はルーティングやサーバー、フレームワークの設定によって異なる。内部URLの形式を統一すると、不要なリダイレクトを避けられる。

  <!-- 内部リンク -->
  <a href="/about">会社概要</a>
  
  <!-- 外部リンク -->
  <a href="https://example.com/pricing">料金</a>

フラグメントリンクと許可するURL

• ページ内のセクションへ移動するリンクには、href="#contact"のようなフラグメント識別子を使用する。値は遷移先要素の一意なidと一致させる。
• 空のhref、仮の値としてのhref="#"、javascript:スキームは使用しない。画面遷移を伴わない操作にはボタンを使用する。
• CMS、ユーザー入力、その他の外部ソースから取得したURLは、許可するスキームのリストに基づいて検証する。未検証のURLは安全でないスキームへの遷移につながる可能性がある。

ファイルへのリンク

• リンクテキストまたは周辺の文脈にファイル形式を示す。ダウンロードの判断に影響する場合はファイルサイズも記載する。

• ダウンロードさせるファイルにはdownload属性を使用できる。同一オリジンのリソース、およびblob:・data:スキームで機能する。レスポンスヘッダーやブラウザー設定によって動作が変わる場合があり、外部リソースのダウンロードをこの属性だけで保証することはできない。

  <a href="/files/guide.pdf" download>ガイド（PDF、2 MB）</a>

アクセシビリティと安全性

視覚的な区別とフォーカス

• 文中のリンクは、下線などの常時表示される視覚的な手がかりを使い、色だけに頼らず通常のテキストと区別する。マウスオーバー時だけの変化では不十分である。
• キーボードフォーカスは視認できる状態に保つ。:focus-visibleでスタイルを設定できる。ネイティブのoutlineを削除する場合は、同等に視認できる表示で置き換える。

繰り返しコンテンツのスキップ

• ナビゲーションなどの繰り返しブロックをスキップする仕組みを設ける。メインコンテンツへのリンクは一般的な実装例である。フラグメントはメイン領域に存在するidと一致させる。初期状態でリンクを隠す場合は、フォーカス時に十分目立つように表示する。

訪問済みリンクの状態

• :visited疑似クラスを使うと、現在のブラウザーで開いたことのあるリンクを視覚的に区別できる。内部リンクと外部リンクの両方に適用される。ブラウザーの制限はリンク先の種類ではなく、閲覧履歴の保護を目的としている。
• プライバシー保護のため、ブラウザーは:visitedに適用できるスタイルと、スクリプトから状態を読み取る方法を制限している。この状態の表示は任意であり、重要な情報を伝える唯一の方法にしてはならない。リンクと周囲のテキストの違いを色だけで示さない。

外部リンクを開く場合

• 外部リンクは通常、現在のタブで開く。target="_blank"はユーザー体験上の明確な理由がある場合に限って使用し、新しいタブまたはウィンドウが開くことを事前に示す。

• target="_blank"を使用する場合は、rel="noopener"を明示する方法が推奨される。現在のブラウザーでは_blankによって新しいページからwindow.openerへアクセスできないが、明示的な属性により要件が分かりやすくなり、古い実装にも対応できる。

• rel="noreferrer"はRefererヘッダーの送信も抑止し、noopenerの動作を含む。参照元情報を送らないことが独立したプライバシー要件である場合に追加し、すべての外部リンクに自動で付けない。

• 外部リンクを示すアイコンは任意である。リンクテキストの横に配置する装飾アイコンは、アクセシブルネームから除外する。新しいタブを開く場合は、スクリーンリーダー利用者にも伝える。

  <a href="https://partner.example" target="_blank" rel="noopener">
    パートナーサイト
    <span aria-hidden="true">↗</span>
    <span class="sr-only">（新しいタブで開きます）</span>
  </a>

sr-onlyはテキストを視覚的に隠すユーティリティクラスの例である。プロジェクトではデザインシステムに定義された同等のクラスを使用する。

検索エンジン向けのrel値

• sponsoredは有料・スポンサーリンク、ugcはユーザー生成コンテンツ内のリンクを示す。nofollowはリンク先との関連付けを避けたい場合や検索エンジン向けの追加情報が必要な場合に使用する。
• これらのrel値はnoopenerの代わりにはならず、window.openerへの対策でもない。通常の外部リンクにnofollowを一律に付ける必要はない。
• Google検索ではこれらの値はヒントとして扱われ、URLの発見やインデックス登録を防ぐ保証にはならない。

メールと電話のリンク

mailto:リンク

• 新しいメールの作成画面を開くにはmailto:スキームを使用する。
• 複数の宛先は空白を入れず、カンマで区切る。subjectやbodyなどのURIパラメーターで追加情報を設定できる。
• パラメーター値はUTF-8のパーセントエンコーディングでURI用にエンコードする。本文の改行は%0D%0Aで表す。JavaScriptでURIを生成する場合は、リンク全体ではなく各パラメーターの値をエンコードする。
• HTMLではパラメーター間の&を&と記述する。リンクは端末に設定されたメールアプリを呼び出すため、アプリの有無や動作をWebサイト側で保証することはできない。

tel:リンク

• 発信にはtel:スキームを使用する。hrefには、先頭の+に続けて数字のみを並べた国際形式の正規化番号を指定する方法が推奨される。空白、括弧、ハイフンは含めない。

• RFC 3966では電話番号の視覚的な区切り文字が認められているが、SSLでは表記を統一するため、区切り文字を含まない正規化形式を採用する。

• 例の電話番号はxxx-xxx-xxxのマスクに置き換えている。hrefのtel:[normalized-number]はプレースホルダーであり、実際に使用する前に正規化済みの実番号へ置き換える。表示用のマスクから発信することはできない。

  <!-- テンプレート：[normalized-number]を使用前に実番号へ置き換える -->
  <a href="tel:[normalized-number]">xxx-xxx-xxx</a>

確認項目

• リンクの目的が、テキストまたはアクセシブルな文脈から分かる。
• キーボードで操作でき、フォーカス状態が視覚的に確認できる。
• :visitedの状態はスクリプトに依存せず、閲覧履歴を外部に公開しない。リンクの識別に色だけを使用しない。
• 新しいタブを開くことを事前に伝え、target="_blank"にはnoopenerを指定する。
• フラグメントが既存要素を指し、ファイルリンクが機能して形式を示すことを確認する。外部URLやユーザー入力由来のURLも検証する。
• URLは合意された正規形式に従い、mailto:とtel:の値が正しく記述されている。

使用例

内部リンク：

<a href="/about">会社概要</a>

ページ内セクションへのリンク：

<a href="#contact">お問い合わせ</a>
<section id="contact">...</section>

繰り返しナビゲーションをスキップするリンク：

<a class="skip-link" href="#main-content">メインコンテンツへ移動</a>
<main id="main-content">...</main>

ダウンロード可能なファイルへのリンク：

<a href="/files/guide.pdf" download>ガイド（PDF、2 MB）</a>

同じタブで開く外部リンク：

<a href="https://example.com">組織のWebサイト</a>

新しいタブで開くことを伝える外部リンク：

<a href="https://partner.example" target="_blank" rel="noopener">
  パートナーサイト
  <span aria-hidden="true">↗</span>
  <span class="sr-only">（新しいタブで開きます）</span>
</a>

件名と本文を設定して2人に送るメール：

<a href="mailto:manager@example.com,ceo@example.com?subject=%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6&amp;body=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E3%80%82%0D%0A%0D%0A%E8%B3%AA%E5%95%8F%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82">
  経営チームにメールする
</a>

電話リンク（テンプレート）：

<!-- テンプレート：[normalized-number]を使用前に実番号へ置き換える -->
<a href="tel:[normalized-number]">xxx-xxx-xxx</a>