From 46666b119e021370c7a6261d1d9b98d684b06de7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 15 Sep 2024 10:43:05 +0900 Subject: [PATCH] =?UTF-8?q?2024/09/15=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/a/index.md | 341 ++++++++++++++------------- 1 file changed, 183 insertions(+), 158 deletions(-) diff --git a/files/ja/web/html/element/a/index.md b/files/ja/web/html/element/a/index.md index 8175f58839de91..e23209bc1616d4 100644 --- a/files/ja/web/html/element/a/index.md +++ b/files/ja/web/html/element/a/index.md @@ -2,7 +2,7 @@ title: ": アンカー要素" slug: Web/HTML/Element/a l10n: - sourceCommit: d3cdafcdb4d22e5c55771501e7c80451a96aa032 + sourceCommit: 1a48b6abdd27e168c78edcf04a7a9f6a8e0fdc15 --- {{HTMLSidebar}} @@ -17,6 +17,29 @@ l10n: この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)があります。 +- `attributionsrc` {{experimental_inline}} + + - : ブラウザーが {{httpheader("Attribution-Reporting-Eligible")}} ヘッダーを送信することを指定します。サーバー側では、これはレスポンスで {{httpheader("Attribution-Reporting-Register-Source")}} ヘッダーの送信を開始し、[ナビゲーションベースのアトリビューションソース](/ja/docs/Web/API/Attribution_Reporting_API/Registering_sources#navigation-based_attribution_sources)を登録するために使用します。 + + ブラウザーは、ユーザーがリンクをクリックすると、ナビゲーションベースのアトリビューションソース（{{httpheader("Attribution-Reporting-Register-Source")}} レスポンスヘッダーで指定された）に関連付けられたソースデータを格納されます。詳細は[アトリビューション報告 API](/ja/docs/Web/API/Attribution_Reporting_API) を参照してください。 + + この属性には設定することができる 2 つのバージョンがあります： + + - 論理値、つまり `attributionsrc` の名前だけです。これは、{{httpheader("Attribution-Reporting-Eligible")}} ヘッダーを、`href` 属性がこの点を指すのと同じサーバーに送ることを指定します。同じサーバーでアトリビューションソースの登録を処理している場合は、これで問題ありません。 + - 1 つ以上の URL を格納する値。例えば、以下のようなものです。 + + ```html + attributionsrc="https://a.example/register-source + https://b.example/register-source" + ``` + + これは、リクエストされたリソースが制御するサーバーにない場合や、属性ソースを別のサーバーに登録する処理だけをしたい場合に有益です。この場合、`attributionsrc` の値として 1 つ以上の URL を指定します。リソースリクエストが発生すると、{{httpheader("Attribution-Reporting-Eligible")}} ヘッダーはリソース元に加えて `attributionsrc` を指定したURLにも送信されます。これらの URL は {{httpheader("Attribution-Reporting-Register-Source")}} で応答し、登録を完了することができます。 + + > [!NOTE] + > 複数のURLを指定するということは、同じ機能に複数の属性ソースを登録できるということを意味しています。例えば、成功を測定しようとしている異なるキャンペーンがあり、異なるデータで異なるレポートを生成する必要があるかもしれません。 + + `` 要素はアトリビューショントリガーとして使用することはできず、ソースとしてのみです。 + - `download` - : ブラウザーがリンクされた URL をダウンロードとして扱うようにします。`filename` 値があってもなくても構いません。 @@ -25,7 +48,7 @@ l10n: - HTTP の {{HTTPHeader("Content-Disposition")}} ヘッダー - URL の[パス](/ja/docs/Web/API/URL/pathname)の最後の部分 - - {{Glossary("MIME_type", "メディア種別")}}（{{HTTPHeader("Content-Type")}} ヘッダー、 [`data:` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) の先頭、 [`blob:` URL](/ja/docs/Web/API/URL/createObjectURL_static) の {{domxref("Blob.type")}} から） + - {{Glossary("MIME_type", "メディア種別")}}（{{HTTPHeader("Content-Type")}} ヘッダー、 [`data:` URL](/ja/docs/Web/URI/Schemes/data) の先頭、 [`blob:` URL](/ja/docs/Web/API/URL/createObjectURL_static) の {{domxref("Blob.type")}} から） - 値を定義すると、ファイル名として提案します。 `/` および `\` はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。 @@ -41,14 +64,18 @@ l10n: - : ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。 - - ページの節を示すフラグメント URL - - [テキストフラグメント](/ja/docs/Web/Text_fragments)で指定されたテキストの部分 - - メディアファイルの一部を示すメディアフラグメント - 電話番号を示す `tel:` URL - メールアドレスを示す `mailto:` URL - SMS テキストメッセージを示す `sms:` URL + - [`javascript:` URL](/ja/docs/Web/URI/Schemes/javascript) による実行可能なコード - ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは [`registerProtocolHandler()`](/ja/docs/Web/API/Navigator/registerProtocolHandler) を使用することができます。 + 他にも、次のようにして URL 機能でリソースの特定の部分を記載することができます。 + + - ページの節を示すフラグメント URL + - [テキストフラグメント](/ja/docs/Web/URI/Fragment/Text_fragments)で指定されたテキストの部分 + - メディアファイルの一部を示すメディアフラグメント + - `hreflang` - : リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 [`lang` グローバル属性](/ja/docs/Web/HTML/Global_attributes/lang)と同じです。 - `ping` @@ -66,7 +93,7 @@ l10n: - `strict-origin-when-cross-origin` (default): 同一オリジンへのリクエストを行う際には URL 全体が送信され、プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) はオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信されません。 - `unsafe-url`: リファラーにはオリジン*および*パスが含まれます（ただし[フラグメント](/ja/docs/Web/API/HTMLAnchorElement/hash)、[パスワード](/ja/docs/Web/API/HTMLAnchorElement/password)、[ユーザー名](/ja/docs/Web/API/HTMLAnchorElement/username)は含まれません）。**この値は安全ではありません**。オリジンとパスを TLS で保護されたリソースから安全ではないオリジンに漏洩させるからです。 -- `rel` +- [`rel`](/ja/docs/Web/HTML/Attributes/rel) - : リンク先の URL との関係を示す、空白で区切られたリンク種別のリストです。 - `target` @@ -76,6 +103,7 @@ l10n: - `_blank`: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。 - `_parent`: 現在の親の閲覧コンテキストです。親がない場合は、 `_self` と同じ振る舞いをします。 - `_top`: 最上位の閲覧コンテキスト（現在のコンテキストの祖先である "最上位" のコンテキスト）です。親の閲覧コンテキストがない場合は、 `_self` と同じ動作をします。 + - `_unfencedTop`: 埋め込まれた[フェンスフレーム](/ja/docs/Web/API/Fenced_frame_API)が最上位のフレームを移動できるようにします (つまり、他の予約された移動先とは異なり、フェンスフレームのルートを越えて移動します)。これがフェンスフレームのコンテキスト外で使用されてもナビゲーションは成功しますが、予約語のようには動作しないことに注意してください。 > **メモ:** `target="_blank"` を `` 要素に設定すると、暗黙的に `rel` の動作は [`rel="noopener"`](/ja/docs/Web/HTML/Attributes/rel/noopener) が設定されたかのように動作し、 `window.opener` を設定しません。 @@ -109,6 +137,152 @@ l10n: > [!NOTE] > イメージマップについては {{HTMLElement("area")}} 要素を使用してください。 +## アクセシビリティ + +### 強力なリンクテキスト + +リンクの内容は、文脈から外れたとしても、**リンクの行き先を示すべきです**。 + +#### アクセシビリティに対応していない貧弱なリンクテキスト + +よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。 + +```html example-bad +

私たちの製品についてはこちらをご覧ください。

+``` + +##### 結果 + +{{EmbedLiveSample('Inaccessible, weak link text')}} + +#### 強力なリンクテキスト + +幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。 + +```html example-good +

私たちの製品について、詳しくご覧ください。

+``` + +##### 結果 + +{{EmbedLiveSample('Strong link text')}} + +支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。 + +### onclick イベント + +よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、`href` を `#` または `javascript:void(0)` に設定してページの再読み込みを防ぎ、`click` を待ち受けするようにするというものがあります。 + +これらの偽の `href` 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。 + +代わりに {{HTMLElement("button")}} を使用してください。通常、**アンカーは適切な URL を使用して移動するためだけに使用するべきです**。 + +### 外部リンクおよび HTML 以外のリソースへのリンク + +リンクを新しいタブやウィンドウで開くために `target="_blank"` を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。 + +弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。 + +#### 新しいタブやウィンドウを開くリンク + +```html + + Wikipedia (新しいウィンドウで開きます) + +``` + +##### 結果 + +{{EmbedLiveSample('Link that opens a new tab/window')}} + +#### HTML 以外のリソースへのリンク + +```html +2017 年次レポート (PowerPoint) +``` + +リンクの動作を示すためにアイコンを使用する場合は、[alt テキスト](/ja/docs/Web/HTML/Element/img#alt)を確実に入れてください。 + +```html + + Wikipedia + (新しいタブで開く) + + + + 2017 年次レポート + (PowerPoint ファイル) + +``` + +##### 結果 + +{{EmbedLiveSample('Link to a non-HTML resource')}} + +- [WebAIM: Links and Hypertext - Hypertext Links](https://webaim.org/techniques/hypertext/hypertext_links) +- [MDN / WCAG を理解する、ガイドライン 3.2](/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways) +- [G200: Opening new windows and tabs from a link only when necessary](https://www.w3.org/TR/WCAG20-TECHS/G200.html) +- [G201: Giving users advanced warning when opening a new window](https://www.w3.org/TR/WCAG20-TECHS/G201.html) + +### スキップリンク + +**スキップリンク**は {{HTMLElement("body")}} コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。 + +```html + + + +
…
+ + +
+ +``` + +```css +.skip-link { + position: absolute; + top: -3em; + background: #fff; +} +.skip-link:focus { + top: 0; +} +``` + +#### 結果 + +{{EmbedLiveSample('Skip links')}} + +スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。 + +スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。 + +- [WebAIM: "Skip Navigation" Links](https://webaim.org/techniques/skipnav/) +- [How-to: Use Skip Navigation links](https://www.a11yproject.com/posts/skip-nav-links/) +- [MDN / WCAG を理解する ― ガイドライン 2.4 の解説](/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) +- [Understanding Success Criterion 2.4.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html) + +### 大きさと近接性 + +#### 大きさ + +リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。少なくとも 44×44 [CSS ピクセル](https://www.w3.org/TR/WCAG21/#dfn-css-pixels)の大きさであることが推奨されています。 + +散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。 + +- [Understanding Success Criterion 2.5.5: Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) +- [Target Size and 2.5.5](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html) +- [Quick test: Large touch targets](https://www.a11yproject.com/posts/large-touch-targets/) + +#### 近接性 + +リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。 + +間隔は {{CSSxRef("margin")}} などの CSS プロパティを使用して作成することができます。 + +- [Hand tremors and the giant-button-problem](https://axesslab.com/hand-tremors/) + ## 例 ### 絶対 URL へのリンク @@ -270,152 +444,6 @@ document `target="_blank"` を [`rel="noreferrer"`](/ja/docs/Web/HTML/Attributes/rel/noreferrer) や [`rel="noopener"`](/ja/docs/Web/HTML/Attributes/rel/noopener) なしで使用すると、ウェブサイトが {{domxref("window.opener")}} API 搾取攻撃を受けやすくなりますが、新しい版のブラウザーでは `target="_blank"` を設定すると、`rel="noopener"` と同じ保護が提供されます。詳しくは[ブラウザーの互換性](#ブラウザーの互換性)を参照してください。 -## アクセシビリティ - -### 強力なリンクテキスト - -リンクの内容は、文脈から外れたとしても、**リンクの行き先を示すべきです**。 - -#### アクセシビリティに対応していない貧弱なリンクテキスト - -よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。 - -```html example-bad -

私たちの製品についてはこちらをご覧ください。

-``` - -##### 結果 - -{{EmbedLiveSample('Inaccessible, weak link text')}} - -#### 強力なリンクテキスト - -幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。 - -```html example-good -

私たちの製品について、詳しくご覧ください。

-``` - -##### 結果 - -{{EmbedLiveSample('Strong link text')}} - -支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。 - -### onclick イベント - -よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、`href` を `#` または `javascript:void(0)` に設定してページの再読み込みを防ぎ、`click` を待ち受けするようにするというものがあります。 - -これらの偽の `href` 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。 - -代わりに {{HTMLElement("button")}} を使用してください。通常、**アンカーは適切な URL を使用して移動するためだけに使用するべきです**。 - -### 外部リンクおよび HTML 以外のリソースへのリンク - -リンクを新しいタブやウィンドウで開くために `target="_blank"` を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。 - -弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。 - -#### 新しいタブやウィンドウを開くリンク - -```html - - Wikipedia (新しいウィンドウで開きます) - -``` - -##### 結果 - -{{EmbedLiveSample('Link that opens a new tab/window')}} - -#### HTML 以外のリソースへのリンク - -```html -2017 年次レポート (PowerPoint) -``` - -リンクの動作を示すためにアイコンを使用する場合は、[alt テキスト](/ja/docs/Web/HTML/Element/img#alt)を確実に入れてください。 - -```html - - Wikipedia - (新しいタブで開く) - - - - 2017 年次レポート - (PowerPoint ファイル) - -``` - -##### 結果 - -{{EmbedLiveSample('Link to a non-HTML resource')}} - -- [WebAIM: Links and Hypertext - Hypertext Links](https://webaim.org/techniques/hypertext/hypertext_links) -- [MDN / WCAG を理解する、ガイドライン 3.2](/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways) -- [G200: Opening new windows and tabs from a link only when necessary](https://www.w3.org/TR/WCAG20-TECHS/G200.html) -- [G201: Giving users advanced warning when opening a new window](https://www.w3.org/TR/WCAG20-TECHS/G201.html) - -### スキップリンク - -**スキップリンク**は {{HTMLElement("body")}} コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。 - -```html - - - -
…
- - -
- -``` - -```css -.skip-link { - position: absolute; - top: -3em; - background: #fff; -} -.skip-link:focus { - top: 0; -} -``` - -#### 結果 - -{{EmbedLiveSample('Skip links')}} - -スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。 - -スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。 - -- [WebAIM: "Skip Navigation" Links](https://webaim.org/techniques/skipnav/) -- [How-to: Use Skip Navigation links](https://www.a11yproject.com/posts/skip-nav-links/) -- [MDN / WCAG を理解する ― ガイドライン 2.4 の解説](/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) -- [Understanding Success Criterion 2.4.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html) - -### 大きさと近接性 - -#### 大きさ - -リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。少なくとも 44×44 [CSS ピクセル](https://www.w3.org/TR/WCAG21/#dfn-css-pixels)の大きさであることが推奨されています。 - -散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。 - -- [Understanding Success Criterion 2.5.5: Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) -- [Target Size and 2.5.5](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html) -- [Quick test: Large touch targets](https://www.a11yproject.com/posts/large-touch-targets/) - -#### 近接性 - -リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。 - -間隔は {{CSSxRef("margin")}} などの CSS プロパティを使用して作成することができます。 - -- [Hand tremors and the giant-button-problem](https://axesslab.com/hand-tremors/) - ## 技術的概要 @@ -450,10 +478,7 @@ document href="/ja/docs/Web/HTML/Content_categories#対話型コンテンツ" >対話型コンテンツ または - a 要素をがないもの、および + <a> 要素がないもの、および tabindexフローコンテンツを受け入れるすべての要素、ただし他の <a> 要素でないもの。 + >を受け入れるすべての要素、ただし他の <a> 要素でないもの。 @@ -523,4 +548,4 @@ document - {{CSSxRef(":link")}} は CSS の擬似クラスで、 `` 要素に有効な `href` 属性がついている場合に一致します。 - {{CSSxRef(":visited")}} は CSS の擬似クラスで、`` 要素の `href` 属性が、過去にユーザーが訪問したことのある URL である場合に一致します。 - {{CSSxRef(":any-link")}} は CSS の擬似クラスで、`` 要素に `href` 属性がある場合に一致します。 -- [テキストフラグメント](/ja/docs/Web/Text_fragments)は、URL に追加するユーザーエージェント指示で、コンテンツ作成者が ID を使用せずに、ページ上の固有のテキストにリンクすることを可能にするものです。 +- [テキストフラグメント](/ja/docs/Web/URI/Fragment/Text_fragments)は、URL に追加するユーザーエージェント指示で、コンテンツ作成者が ID を使用せずに、ページ上の固有のテキストにリンクすることを可能にするものです。