path: root/files/ja/web/html/element/a/index.html

---
title: '<a>: アンカー要素'
slug: Web/HTML/Element/a
tags:
  - Content
  - Element
  - HTML
  - HTML text-level semantics
  - 'HTML:Flow content'
  - 'HTML:Interactive content'
  - 'HTML:Palpable Content'
  - 'HTML:Phrasing content'
  - Inline element
  - Reference
  - Web
translation_of: Web/HTML/Element/a
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML の <code>&lt;a&gt;</code> 要素</strong> (<em>アンカー</em>要素) は、 <a href="#href"><code>href</code> 属性</a>を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。</span> <code>&lt;a&gt;</code> の内容は、リンク先を示すもの<strong>であるべきです</strong>。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>

<dl>
 <dt id="download">{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt>
 <dd>リンクされた URL に移動するのではなく、保存するようユーザーに促します。値があってもなくても利用できます。</dd>
 <dd>
 <dl>
  <dd>値を定義すると、ファイル名として提案します。 <code>/</code> および <code>\</code> はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。</dd>
 </dl>

 <ul>
  <li>値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。
   <ul>
    <li>HTTP の {{HTTPHeader("Content-Disposition")}} ヘッダー</li>
    <li>URL の<a href="/ja/docs/Web/API/URL/pathname">パス</a>の最後の部分</li>
    <li>{{Glossary("MIME_type", "メディア種別")}} ({{HTTPHeader("Content-Type")}} ヘッダー、 <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a> の先頭、 <a href="/ja/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a> の {{domxref("Blob.type")}} から)</li>
   </ul>
  </li>
 </ul>

 <div class="note"><strong>注:</strong>

 <ul>
  <li><code>download</code> は<a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンの URL</a> と、 <code>blob:</code>、 <code>data:</code> の各スキームでのみ動作します。</li>
  <li>
   <p><code>Content-Disposition</code> ヘッダーが <code>download</code> とは異なる情報を持っていた場合、動作結果は様々です。</p>

   <ul>
    <li>
     <p>ヘッダーが <code>filename</code> を指定した場合、そちらが <code>download</code> 属性で指定されたファイル名より優先されます。</p>
    </li>
    <li>
     <p>ヘッダーが <code>inline</code> の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。 82 以前のバージョンの Firefox では、ヘッダーが優先され、コンテンツがインラインで表示されます。</p>
    </li>
   </ul>
  </li>
 </ul>
 </div>
 </dd>
 <dt id="href">{{HTMLAttrDef("href")}}</dt>
 <dd>
 <p>ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。</p>

 <ul>
  <li>ページの節を示すフラグメント URL</li>
  <li>メディアファイルの一部を示すメディアフラグメント</li>
  <li>電話番号を示す <code>tel:</code> URL</li>
  <li>メールアドレスを示す <code>mailto:</code> URL</li>
  <li>ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler()")}} を使用することができます。</li>
 </ul>
 </dd>
 <dt id="hreflang">{{HTMLAttrDef("hreflang")}}</dt>
 <dd>リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 <a href="/ja/docs/Web/HTML/Global_attributes/lang"><code>lang</code> グローバル属性</a>と同じです。</dd>
 <dt id="ping">{{HTMLAttrDef("ping")}}</dt>
 <dd>空白で区切られた URL のリストです。リンクをたどるときに、ブラウザーは {{HTTPMethod("POST")}} リクエストを指定された URL に、 <code>PING</code> を本文として送信します。通常、トラッキングに使用されます。</dd>
 <dt id="referrerpolicy">{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}</dt>
 <dd>リンクをたどるときにどれだけの<a href="/ja/docs/Web/HTTP/Headers/Referer">リファラー</a>を送信するかです。有効な値とその効果については {{HTTPHeader("Referrer-Policy")}} を参照してください。</dd>
 <dt id="rel">{{HTMLAttrDef("rel")}}</dt>
 <dd>リンク先の URL との関係を示す、空白で区切られた<a href="/ja/docs/Web/HTML/Link_types">リンク種別</a>のリストです。</dd>
 <dt id="target">{{HTMLAttrDef("target")}}</dt>
 <dd>リンク先の URL を表示する場所、 <em>閲覧コンテキスト</em> (タブ、ウィンドウ、<code>&lt;iframe&gt;</code>) の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。
 <ul>
  <li><code>_self</code>: 現在の閲覧コンテキストです。 (既定値)</li>
  <li><code>_blank</code>: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。</li>
  <li><code>_parent</code>: 現在の親の閲覧コンテキストです。親がない場合は、 <code>_self</code> と同じ振る舞いをします。</li>
  <li><code>_top</code>: 最上位の閲覧コンテキスト (現在のコンテキストの祖先である "最上位" のコンテキスト) です。親の閲覧コンテキストがない場合は、 <code>_self</code> と同じ動作をします。</li>
 </ul>

 <div class="note">
 <p><strong>注:</strong> <code>target</code> を使用する際は、<code>window.opener</code> API の悪用を避けるために <code>rel="noreferrer"</code> を追加してください。</p>
 </div>

 <div class="note">
 <p><strong>注:</strong> 新しいブラウザー (例えば Firefox 79 以降) では、 <code>target="_blank"</code> を <code>&lt;a&gt;</code> 要素に設定すると、暗黙に <code>rel</code> の動作を <code>rel="noopener"</code> と設定したのと同様になります。</p>
 </div>
 </dd>
 <dt id="type">{{HTMLAttrDef("type")}}</dt>
 <dd>リンク先 URL の {{Glossary("MIME type", "MIME タイプ")}}の形式を表すヒントです。組み込まれている機能はありません。</dd>
</dl>

<h3 id="Obsolete_attributes" name="Obsolete_attributes">廃止された属性</h3>

<dl>
 <dt>{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>リンク先 URL の{{Glossary("character encoding", "文字エンコーディング")}}のヒントでした。
 <div class="note">
 <p><strong>注:</strong> この属性は廃止されており、<strong>ページ作者が使用すべきではありません</strong>。リンク先の URL で HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。</p>
 </div>
 </dd>
 <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd><a href="#shape"><code>shape</code> 属性</a>とともに使用されます。カンマ区切りの座標のリストです。</dd>
 <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば <code>id</code> 属性と <code>name</code> 属性を <code>&lt;a&gt;</code> 要素内で同時に使用できました。
 <div class="note">
 <p><strong>注:</strong> 代わりにグローバル属性の {{HTMLAttrxRef("id")}} を使用してください。</p>
 </div>
 </dd>
 <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>この属性は、逆方向のリンクを指定します。 <a href="#rel"><code>rel</code> 属性</a>と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。</dd>
 <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>イメージマップ内のハイパーリンクの領域の形状です。
 <div class="note"><strong>注:</strong> イメージマップについては {{HTMLElement("area")}} 要素を使用してください。</div>
 </dd>
</dl>

<h2 id="Properties" name="Properties">プロパティ</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>, 知覚可能コンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a>で、<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a> (<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>を除く) または<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を含むもの</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素、<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a> を受け入れるすべての要素。ただし &lt;a&gt; 要素を除く。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td>{{ARIARole("link")}} (<code>href</code> 属性がある場合）。それ以外は <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>
    <p><code>href</code> 属性がある場合:</p>

    <ul>
     <li>{{ARIARole("button")}}</li>
     <li>{{ARIARole("checkbox")}}</li>
     <li>{{ARIARole("menuitem")}}</li>
     <li>{{ARIARole("menuitemcheckbox")}}</li>
     <li>{{ARIARole("menuitemradio")}}</li>
     <li>{{ARIARole("option")}}</li>
     <li>{{ARIARole("radio")}}</li>
     <li>{{ARIARole("switch")}}</li>
     <li>{{ARIARole("tab")}}</li>
     <li>{{ARIARole("treeitem")}}</li>
    </ul>

    <p><code>href</code> 属性がない場合:</p>

    <ul>
     <li>any</li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{DOMxRef("HTMLAnchorElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Linking_to_an_absolute_URL" name="Linking_to_an_absolute_URL">絶対 URL へのリンク</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.com"&gt;
  Mozilla
&lt;/a&gt;</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Linking_to_an_absolute_URL')}}</p>

<h3 id="Linking_to_relative_URLs" name="Linking_to_relative_URLs">相対 URL へのリンク</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;a href="//example.com"&gt;Scheme-relative URL&lt;/a&gt;
&lt;a href="/en-US/docs/Web/HTML"&gt;Origin-relative URL&lt;/a&gt;
&lt;a href="./p"&gt;Directory-relative URL&lt;/a&gt;
</pre>

<div class="hidden">
<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre>
</div>

<h4 id="Result_2" name="Result_2">結果</h4>

<p>{{EmbedLiveSample('Linking_to_relative_URLs')}}</p>

<h3 id="Linking_to_an_element_on_the_same_page" name="Linking_to_an_element_on_the_same_page">同じページの要素へのリンク</h3>

<pre class="brush: html notranslate">&lt;!-- &lt;a&gt; element links to the section below --&gt;
&lt;p&gt;&lt;a href="#Section_further_down"&gt;
  Jump to the heading below
&lt;/a&gt;&lt;/p&gt;

&lt;!-- Heading to link to --&gt;
&lt;h2 id="Section_further_down"&gt;Section further down&lt;/h2&gt;
</pre>

<div class="blockIndicator note">
<p><strong>注:</strong> <code>href="#top"</code> または空のフラグメント (<code>href="#"</code>) を使用すると、現在のページの先頭にリンクすることができると、 <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">HTML 仕様書で定義されています</a>。</p>
</div>

<h3 id="Linking_to_an_email_address" name="Linking_to_an_email_address">メールアドレスへのリンク</h3>

<p>メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 <code>mailto:</code> スキームを使用してください。</p>

<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org"&gt;nowhere にメールを送る&lt;/a&gt;</pre>

<p>件名、本文、他の定義済みコンテンツを含めるなど、<code>mailto</code> URL スキームの詳細については、<a href="/ja/docs/Web/Guide/HTML/Email_links">電子メールのリンク</a>または {{RFC(6068)}} をご覧ください。</p>

<h3 id="Linking_to_telephone_numbers" name="Linking_to_telephone_numbers">電話番号へのリンク</h3>

<pre class="brush: html notranslate">&lt;a href="tel:+49.157.0156"&gt;+49 157 0156&lt;/a&gt;
&lt;a href="tel:+1(555)5309"&gt;(555) 5309&lt;/a&gt;</pre>

<p><code>tel:</code> リンクは端末の能力によって様々な動作をします。</p>

<ul>
 <li>携帯電話ではその番号にオートダイヤルします。</li>
 <li>多くのオペレーティングシステムには、 Skype や FaceTime のように電話をかけるプログラムがあります。</li>
 <li>ウェブサイトは {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}} によって <code>web.skype.com</code> などを用いて電話を掛けることができます。</li>
 <li>他にも、連絡先の電話番号をしたり、他の端末へ電話番号を送信したりする動作があります。</li>
</ul>

<p><code>tel</code> URL スキームについての構文、追加機能、その他の詳細について、詳しくは {{RFC(3966)}} をご覧ください。</p>

<h3 id="Using_the_download_attribute_to_save_a_&lt;canvas>_as_a_PNG" name="Using_the_download_attribute_to_save_a_&lt;canvas>_as_a_PNG">download 属性を使用して &lt;canvas&gt; を PNG として保存する</h3>

<p>{{HTMLElement("canvas")}} 要素の内容を画像として保存する場合は、 <code>download</code> 属性をもつリンクを作成し、キャンバスのデータを <code>data:</code> URLで示します。</p>

<h4 id="Example_painting_app_with_save_link" name="Example_painting_app_with_save_link">例: 保存リンクのついた描画アプリ</h4>

<h5 id="HTML_3">HTML</h5>

<pre class="brush: html notranslate">&lt;p&gt;マウスボタンを押しっぱなしにして動かすと描画されます。
  &lt;a href="" download="my_painting.png"&gt;絵をダウンロード&lt;/a&gt;
&lt;/p&gt;

&lt;canvas width="300" height="300"&gt;&lt;/canvas&gt;
</pre>

<h5 id="CSS_2">CSS</h5>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}</pre>

<h5 id="JavaScript">JavaScript</h5>

<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'),
    c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

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 =&gt;
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () =&gt; isDrawing = true);
canvas.addEventListener('mouseup', () =&gt; isDrawing = false);

document.querySelector('a').addEventListener('click', event =&gt;
  event.target.href = canvas.toDataURL()
);
</pre>

<h5 id="Result_3" name="Result_3">結果</h5>

<p>{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}</p>

<h2 id="Security_and_privacy" name="Security_and_privacy">セキュリティとプライバシー</h2>

<p><code>&lt;a&gt;</code> 要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については <a href="/ja/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer ヘッダー: プライバシーとセキュリティの考慮事項</a>を参照してください。</p>

<p><code>target="_blank"</code> を <code>rel="noreferrer"</code> や <code>rel="noopener"</code> なしで使用すると、ウェブサイトが {{domxref("window.opener")}} API 搾取攻撃を受けやすくなります (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">vulnerability description</a>) が、新しい版のブラウザー (Firefox 79 以降など) では <code>target="_blank"</code> を設定すると、 <code>rel="noopener"</code> と同じ保護が提供されます。</p>

<h2 id="Accessibility" name="Accessibility">アクセシビリティ</h2>

<h3 id="Strong_link_text" name="Strong_link_text">強力なリンクテキスト</h3>

<p>リンクの内容は、文脈から外れたとしても、<strong>リンクの行き先を示すべきです</strong>。</p>

<h4 id="Inaccessible_weak_link_text" name="Inaccessible_weak_link_text">アクセシビリティに対応していない貧弱なリンクテキスト</h4>

<p>よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。</p>

<pre class="brush: html example-bad notranslate">&lt;p&gt;
  私たちの製品については&lt;a href="/products"&gt;こちら&lt;/a&gt;をご覧ください。
&lt;/p&gt;
</pre>

<h4 id="Strong_link_text_2" name="Strong_link_text_2">強力なリンクテキスト</h4>

<p>幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。</p>

<pre class="brush: html example-good notranslate">&lt;p&gt;
  &lt;a href="/products"&gt;私たちの製品について&lt;/a&gt;詳しくご覧ください。
&lt;/p&gt;</pre>

<p>支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。</p>

<h3 id="onclick_events" name="onclick_events">onclick イベント</h3>

<p>よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、 <strong>href</strong> を <code>#</code> または <code>javascript:void(0)</code> に設定してページの再読み込みを防ぎ、 <code>click</code> を待ち受けするようにするというものがあります。</p>

<p>これらの偽の <code>href</code> 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。</p>

<p>代わりに {{HTMLElement("button")}} を使用してください。通常、<strong>アンカーは適切な URL を使用して移動するためだけに使用するべきです</strong>。</p>

<h3 id="External_links_and_linking_to_non-HTML_resources" name="External_links_and_linking_to_non-HTML_resources">外部リンクおよび HTML 以外のリソースへのリンク</h3>

<p>リンクを新しいタブやウィンドウで開くために <code>target="_blank"</code> を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。</p>

<p>弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。</p>

<h4 id="Link_that_opens_a_new_tabwindow" name="Link_that_opens_a_new_tabwindow">新しいタブやウィンドウを開くリンク</h4>

<pre class="brush: html notranslate">&lt;a target="_blank" href="https://www.wikipedia.org"&gt;
  Wikipedia (新しいウィンドウで開きます)
&lt;/a&gt;
</pre>

<h4 id="Link_to_a_non-HTML_resource" name="Link_to_a_non-HTML_resource">HTML 以外のリソースへのリンク</h4>

<pre class="brush: html notranslate">&lt;a href="2017-annual-report.ppt"&gt;
  2017 年次レポート (PowerPoint)
&lt;/a&gt;
</pre>

<p>この種のリンクの動作を表すためにテキストの代わりにアイコンが使われている場合は、 {{HTMLAttrxRef("alt", "img", "alt のテキスト", "true") }}を確実に入れてください。</p>

<pre class="brush: html notranslate">&lt;a  target="_blank" href="https://www.wikipedia.org"&gt;
  Wikipedia
  &lt;img alt="(新しいタブで開く)" src="newtab.svg"&gt;
&lt;/a&gt;

&lt;a href="2017-annual-report.ppt"&gt;
  2017 Annual Report
  &lt;img alt="(PowerPoint ファイル)" src="ppt-icon.svg"&gt;
&lt;/a&gt;</pre>

<ul>
 <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / WCAG を理解する、ガイドライン 3.2"</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li>
</ul>

<h3 id="Skip_links" name="Skip_links">スキップリンク</h3>

<p><strong>スキップリンク</strong>は {{HTMLElement("body")}} コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、 CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。</p>

<pre class="notranslate">&lt;body&gt;
  &lt;a href="#content"&gt;メインコンテンツへスキップ&lt;/a&gt;

  &lt;header&gt;
    …
  &lt;/header&gt;

  &lt;main id="content"&gt; &lt;!-- スキップリンクが辿り着く位置 --&gt;
</pre>

<pre class="brush: css notranslate">.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}</pre>

<p>スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。</p>

<p>スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。</p>

<ul>
 <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li>
 <li><a href="https://a11yproject.com/posts/2013-05-11-skip-nav-links/">How-to: Use Skip Navigation links</a></li>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / WCAG を理解する ― ガイドライン 2.4 の解説</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li>
</ul>

<h3 id="大きさと近接性">大きさと近接性</h3>

<h4 id="Size" name="Size">大きさ</h4>

<p>リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。最小の大きさは 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a>が推奨されます。</p>

<p>散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。</p>

<ul>
 <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li>
 <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li>
 <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li>
</ul>

<h4 id="Proximity" name="Proximity">近接性</h4>

<p>リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。</p>

<p>間隔は {{CSSxRef("margin")}} などの CSS プロパティを使用して作成することができます。</p>

<ul>
 <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td>
   <td>{{Spec2("Referrer Policy")}}</td>
   <td><code>referrerpolicy</code> 属性を追加。</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML4.01")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.a")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{HTMLElement("link")}} は <code>&lt;a&gt;</code> と似ていますが、ユーザーには見えないメタデータへのハイパーリンクのためのものです。</li>
 <li>{{CSSxRef(":link")}} は CSS の擬似クラスで、 <code>&lt;a&gt;</code> 要素に有効な valid <code>href</code> 属性がついている場合に一致します。</li>
</ul>