attributionsrc="https://a.example/register-source
https://b.example/register-source"
これは、リクエストされたリソースが制御するサーバーにない場合や、属性ソースを別のサーバーに登録する処理だけをしたい場合に有益です。この場合、attributionsrc の値として 1 つ以上の URL を指定します。リソースリクエストが発生すると、Attribution-Reporting-Eligible ヘッダーはリソース元に加えて attributionsrc を指定したURLにも送信されます。これらの URL は Attribution-Reporting-Register-Source で応答し、登録を完了することができます。
複数のURLを指定するということは、同じ機能に複数の属性ソースを登録できるということを意味しています。例えば、成功を測定しようとしている異なるキャンペーンがあり、異なるデータで異なるレポートを生成する必要があるかもしれません。
<a> 要素はアトリビューショントリガーとして使用することはできず、ソースとしてのみです。
download
ブラウザーがリンクされた URL をダウンロードとして扱うようにします。filename 値があってもなくても構いません。
値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。
HTTP の Content-Disposition ヘッダー
URL のパスの最後の部分
メディア種別（Content-Type ヘッダー、 data: URL の先頭、 blob: URL の Blob.type から）
値を定義すると、ファイル名として提案します。 / および \ はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。
download は同一オリジンの URL と、 blob:、 data: の各スキームでのみ動作します。
ブラウザーがダウンロードをどのように扱うかは、ブラウザー、ユーザーの設定、その他の要因によって異なります。ダウンロードを開始する前にユーザーにプロンプトが表示されたり、ファイルが自動的に保存されたり、外部のアプリケーションまたはブラウザー自体で自動的に開いたりすることがあります。
Content-Disposition ヘッダーが download とは異なる情報を持っていた場合、動作結果は様々です。
ヘッダーが filename を指定した場合、そちらが download 属性で指定されたファイル名より優先されます。
ヘッダーが inline の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。Firefox の（82 以前の）古い版では、ヘッダーが優先され、コンテンツがインラインで表示されます。
ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。
電話番号を示す tel: URL
メールアドレスを示す mailto: URL
SMS テキストメッセージを示す sms: URL
javascript: URL による実行可能なコード
ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは registerProtocolHandler() を使用することができます。
他にも、次のようにして URL 機能でリソースの特定の部分を記載することができます。
ページの節を示すフラグメント URL
テキストフラグメントで指定されたテキストの部分
メディアファイルの一部を示すメディアフラグメント
hreflang
リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 lang グローバル属性と同じです。
空白で区切られた URL のリストです。リンクをたどるとき、ブラウザーは POST リクエストを指定された URL に、 PING を本文として送信します。通常、トラッキングに使用されます。
referrerpolicy
リンクをたどるときにどれだけのリファラーを送信するかです。
no-referrer: Referer ヘッダーは送信されません。
no-referrer-when-downgrade: Referer ヘッダーはオリジンに TLS (HTTPS) がない場合は送信されません。
origin: 送信されるリファラーは、参照元ページのオリジンのみに限定されます。すなわちスキーム、ホスト名、ポート番号です。
origin-when-cross-origin: 他のオリジンに送信されるリファラーは、スキーム、ホスト名、ポート番号に限定されます。同じオリジン内での移動の場合はパスが含まれます。
same-origin: リファラーは同じオリジンには送られますが、オリジン間リクエストではリファラー情報が含まれません。
strict-origin: プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) は、文書のオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信しません。
strict-origin-when-cross-origin (default): 同一オリジンへのリクエストを行う際には URL 全体が送信され、プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) はオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信されません。
unsafe-url: リファラーにはオリジンおよびパスが含まれます（ただしフラグメント、パスワード、ユーザー名は含まれません）。この値は安全ではありません。オリジンとパスを TLS で保護されたリソースから安全ではないオリジンに漏洩させるからです。
リンク先の URL との関係を示す、空白で区切られたリンク種別のリストです。
target
リンク先の URL を表示する場所、閲覧コンテキスト（タブ、ウィンドウ、<iframe>）の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。
_self: 現在の閲覧コンテキストです。（既定値）
_blank: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
_parent: 現在の親の閲覧コンテキストです。親がない場合は、 _self と同じ振る舞いをします。
_top: 最上位の閲覧コンテキスト（現在のコンテキストの祖先である "最上位" のコンテキスト）です。親の閲覧コンテキストがない場合は、 _self と同じ動作をします。
_unfencedTop: 埋め込まれたフェンスフレームが最上位のフレームを移動できるようにします (つまり、他の予約された移動先とは異なり、フェンスフレームのルートを越えて移動します)。これがフェンスフレームのコンテキスト外で使用されてもナビゲーションは成功しますが、予約語のようには動作しないことに注意してください。
target="_blank" を <a> 要素に設定すると、暗黙的に rel の動作は rel="noopener" が設定されたかのように動作し、 window.opener を設定しません。
リンク先 URL の MIME タイプの形式を表すヒントです。組み込まれている機能はありません。
charset
リンク先 URL の文字エンコーディングのヒントでした。
この属性は廃止されており、ページ作者が使用すべきではありません。リンク先の URL で HTTP の Content-Type ヘッダーを使用してください。
coords
shape 属性とともに使用されます。カンマ区切りの座標のリストです。
ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば id 属性と name 属性を <a> 要素内で同時に使用できました。
代わりにグローバル属性の id を使用してください。
この属性は、逆方向のリンクを指定します。 rel 属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。
shape
イメージマップ内のハイパーリンクの領域の形状です。
イメージマップについては <area> 要素を使用してください。
リンクの内容は、文脈から外れたとしても、リンクの行き先を示すべきです。
アクセシビリティに対応していない貧弱なリンクテキスト
よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。
<p>私たちの製品については<a href="/products">こちら</a>をご覧ください。</p>
強力なリンクテキスト
幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。
<p><a href="/products">私たちの製品について</a>、詳しくご覧ください。</p>
支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。
よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、click を待ち受けするようにするというものがあります。
これらの偽の href 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。
代わりに <button> を使用してください。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。
リンクを新しいタブやウィンドウで開くために target="_blank" を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。
弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。
新しいタブやウィンドウを開くリンク
<a target="_blank" href="https://www.wikipedia.org">
Wikipedia (新しいウィンドウで開きます)
HTML 以外のリソースへのリンク
リンクの動作を示すためにアイコンを使用する場合は、 alt テキストを確実に入れてください。アイコンがない場合でも、 alt 属性のコンテンツによってリンクの動作が伝わりまます。
<p>
<a href="https://www.wikipedia.org/" target="_blank">
Wikipedia
<img src="new-tab.svg" width="14" alt="(新しいタブで開く)" />
<a href="2017-annual-report.ppt">
2017 annual report
<img src="powerpoint.svg" width="14" alt="(PowerPoint ファイル)" />
<a href="https://www.wikipedia.org/" target="_blank">
Wikipedia
<img src="missing-icon.svg" width="14" alt="(新しいタブで開く)" />
<a href="2017-annual-report.ppt">
2017 annual report
<img src="missing-icon.svg" width="14" alt="(PowerPoint ファイル)" />
WebAIM: Links and Hypertext - Hypertext Links
MDN / WCAG を理解する、ガイドライン 3.2
G200: Opening new windows and tabs from a link only when necessary
G201: Giving users advanced warning when opening a new window
スキップリンクは <body> コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。
<body>
<a href="#content" class="skip-link">メインコンテンツへスキップ</a>
<header>…</header>
<!-- スキップリンクがたどり着く位置 -->
<main id="content"></main>
</body>
.skip-link {
position: absolute;
top: -3em;
background: #fff;
.skip-link:focus {
top: 0;
スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。
スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。
WebAIM: "Skip Navigation" Links
How-to: Use Skip Navigation links
MDN WCAG を理解する、ガイドライン 2.4 の解説
Understanding Success Criterion 2.4.1
リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。少なくとも 44×44 CSS ピクセルの大きさであることが推奨されています。
散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。
Understanding Success Criterion 2.5.5: Target Size
Target Size and 2.5.5
Quick test: Large touch targets
リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。
間隔は margin などの CSS プロパティを使用して作成することができます。
Hand tremors and the giant-button-problem
<a href="https://www.mozilla.com">Mozilla</a>
<a href="//example.com">スキーム相対 URL</a>
<a href="/ja/docs/Web/HTML">オリジン相対 URL</a>
<a href="p">ディレクトリー相対 URL</a>
<a href="./p">ディレクトリー相対 URL</a>
<a href="../p">親ディレクトリー相対 URL</a>
display: block;
margin-bottom: 0.5em;
<!-- 以下のセクションにリンクする <a> 要素 -->
<p><a href="#Section_further_down">下記の見出しまでジャンプ</a></p>
<!-- リンク先の見出し -->
<h2 id="Section_further_down">さらに下のセクション</h2>
href="#top" または空のフラグメント (href="#") を使用すると、現在のページの先頭にリンクすることができると、 HTML 仕様書で定義されています（英語）。
メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 mailto: スキームを使用してください。
<a href="mailto:nowhere@mozilla.org">nowhere へメールを送信</a>
件名や本文を含めるなど、mailto: URL スキームの詳細については、電子メールのリンクまたは RFC 6068 をご覧ください。
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>
tel: リンクは端末の能力によって様々な動作をします。
携帯電話ではその番号に自動ダイヤルします。
多くのオペレーティングシステムには、 Skype や FaceTime のように電話をかけるプログラムがあります。
ウェブサイトは registerProtocolHandler によって web.skype.com などを用いて電話を掛けることができます。
他にも、連絡先の電話番号を保存したり、他の端末へ電話番号を送信したりする動作があります。
tel URL スキームについての構文、追加機能、その他の詳細について、詳しくは RFC 3966 をご覧ください。
<canvas> 要素の内容を画像として保存するには、href に JavaScript で生成したキャンバスのデータが入った data: URL、download 属性にダウンロードする PNG ファイルのファイル名を指定したリンクを作成します。
保存リンクのついた描画アプリ
<p>
マウスボタンを押しっぱなしにして動かすと描画されます。
<a href="" download="my_painting.png">絵をダウンロード</a>
<canvas width="300" height="300"></canvas>
html {
font-family: sans-serif;
canvas {
background: #fff;
border: 1px dashed;
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
JavaScript
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;
function draw(x, y) {
if (isDrawing) {
c.beginPath();
c.arc(x, y, 10, 0, Math.PI * 2);
c.closePath();
c.fill();
canvas.addEventListener("mousemove", (event) =>
draw(event.offsetX, event.offsetY),
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));
document
.querySelector("a")
.addEventListener(
"click",
(event) => (event.target.href = canvas.toDataURL()),
<a> 要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については Referer ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。
target="_blank" を rel="noreferrer" や rel="noopener" なしで使用すると、ウェブサイトが window.opener API 搾取攻撃を受けやすくなりますが、新しい版のブラウザーでは target="_blank" を設定すると、rel="noopener" と同じ保護が提供されます。詳しくはブラウザーの互換性を参照してください。
<link> は <a> と似ていますが、ユーザーには見えないメタデータへのハイパーリンクのためのものです。
:link は CSS の擬似クラスで、 <a> 要素に有効な href 属性がついている場合に一致します。
:visited は CSS の擬似クラスで、<a> 要素の href 属性が、過去にユーザーが訪問したことのある URL である場合に一致します。
:any-link は CSS の擬似クラスで、<a> 要素に href 属性がある場合に一致します。
テキストフラグメントは、URL に追加するユーザーエージェント指示で、コンテンツ作成者が ID を使用せずに、ページ上の固有のテキストにリンクすることを可能にするものです。
