link-in-text-block
テキストブロック内のリンクは、色だけに頼らずに周囲のテキストと区別できる必要があります
テキストのまとまりの中のリンクが、色以外の手がかり（下線、フォントの太さやスタイル、ボーダー、背景、アイコン）によって周囲のテキストと視覚的に区別できることを確認します。3:1以上の色の差だけで区別されているリンクについては、ホバー時とフォーカス時の手がかりも必要なため、確認を求めます。
適用範囲：テキストを描画し（リンクのフラットツリーに空白以外のテキストがあり、ページにレイアウトがある場合は面積を持つボックスがある）、かつ直接の親要素が、リンクの横に文字または数字を含むテキストも持っているリンク（<a href>と、role属性がlinkに解決される要素。既知のロールを指す最初のトークンを大文字と小文字を区別せずに読んだものがlinkであるもの）に適用されます。そのテキストは、直接の子テキストノード、または同じ行にあるリンク以外のインライン要素内のテキストで、見えないように描画されておらず、flexやgridの親の項目でもないものです（つまり、リンクが独立した項目としてではなく、テキストの流れの中にインラインで置かれている場合。例えばナビゲーションの<li>の唯一の内容である場合や、「|」や「·」で区切られて並んだリンクの1つである場合は除きます）。ElementInternalsによってlinkロールを与えられたカスタム要素（this.attachInternals().role）も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。
期待される結果：テキストのまとまりの中のリンクは、色以外の少なくとも1つの手段で周囲のテキストと視覚的に区別できなければなりません。
- text-decoration: underline、または
- 周囲のテキストと異なるfont-weightまたはfont-style、または
- リンク自体の別の目に見える印：ボーダー、box-shadowまたはoutline、周囲と異なる背景色、背景画像、内部の画像やsvg、または何かを描画する::before/::after（独自のコンテンツ、またはその方法で描いた下線のように、背景、ボーダー、outline、影を描く空のボックス）、または
- リンクの内容全体に付いた印：太字、斜体、下線、ボーダー、周囲のテキストと異なる背景（コードのチップ、<mark>）、または上付き・下付き（脚注の<sup>）。
これらのどれもないリンクは、色だけで区別されています。その色が周囲のテキストと3:1以上のコントラストを持つ場合、達成方法G183を満たすのはホバー時とフォーカス時にも色以外の手がかりが加わるときだけで、静的なスキャンではそれを確認できないため、リンクはcantTellとして報告します。3:1未満で、コントラストを確実に計算できる場合は、色が唯一の手がかりであることが明らかなため、リンクは不合格です。リンクの色とテキストの色の比率に背景は不要です。そのため、背景だけ、または両方に同じように適用される効果だけが測定を妨げている場合でも、2つの不透明なテキストの色で判定できます。マージン（contrast-ratio）：色だけで区別され、3:1に達しているリンクのうち、3:1に最も近いもので、丸めていない比率を示します。こうしたリンクは（ホバー時とフォーカス時の手がかりについて）確認も求められるため、マージンはcantTellまたはfailの結果に現れます。3:1から10%以内（3.3:1まで）のリンクだけを近いとみなします。measuredCountは、色だけが手がかりになっているリンクの数です。
検出結果が報告する内容：
metrics.ratio（色だけで区別されているリンク）：リンクのテキストの色と周囲のテキストの色のコントラスト比（3:1なら3）で、metrics.threshold（3）と比較されます。metrics.ratioBeforeOpacity（ANCESTOR_OPACITYの下で、色だけで区別されているリンク）：祖先のopacityがリンクとテキストを同じように薄くする前の比率で、metrics.ratioの代わりに付きます。薄くなると2色は近づくため、描画される比率はより低い可能性があります。3:1未満であればリンクはやはりfailになり、3:1以上であれば合格寄りにせずに確認を求め、マージンは得られません。colors.linkForegroundHex、colors.surroundingTextForegroundHex（色だけで区別されているリンク）：リンクのテキストの色と周囲のテキストの色で、16進数表記です。colorScheme（ライトとダークの両方に対応するページのキャンバスの上で、独自の背景色を持つリンク）：その背景が周囲のキャンバスからリンクを区別しないスキームで、'light'または'dark'です。もう一方のスキームでは区別しています。比率と色はそのスキームのものです。測定したどのスキームでも足りない場合は付きません。colorSchemesChecked（同じリンク）：比較したスキームです。ページが両方に対応し、一方を測定できなかった場合に付きます（リンクの色や周囲の背景がスキームによって変わる可能性があります）。バインディングは、ブラウザーをもう一方のスキームにして再スキャンできます。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
マージン：このルールはcontrast-ratioを比として測定し、値はしきい値に達している必要があります。しきい値を満たした値がしきい値の近くにあった場合、結果のmarginは、しきい値を満たしつつ最もしきい値に近づいた要素を示します。そのため、わずかな変更で判定結果が変わる箇所を、変わる前に把握できます。検出結果のフィールドとは異なり、安定した契約です。出力スキーマを参照してください。
例
<p>Read <a href="#" style="text-decoration:underline">this underlined link</a> for more information.</p>
リンクに下線があり、色以外の手段でも周囲のテキストと区別できます。
<p style="color:#222222; background:#ffffff;">Read <a href="#" style="text-decoration:none; color:#2a2a2a;">this link</a> for more information.</p>
周囲のテキストとの違いは約1.1:1のコントラストしかない色の変化だけで、最低基準の3:1を大きく下回っており、下線もfont-weight/styleの変化もありません。
<p style="color:#000000;">Read <a href="#" style="text-decoration:none; color:#d00000;">this link</a> for more information.</p>
リンクの色はテキストと3:1を超えるコントラストがありますが、色が唯一の手がかりです。達成方法G183ではホバー時とフォーカス時にも色以外の手がかりが必要で、それは人が確認します。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
ANCESTOR_OPACITY
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。薄くする効果によって色が変わるため、色は画面から読み取ってください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
BACKGROUND_FILTER_OR_BACKDROP_FILTER
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。フィルターによって色が変わるため、色は画面から読み取ってください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
BACKGROUND_IMAGE_OR_GRADIENT
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- 背景画像の上の色だけでなく、下線、太字、斜体、枠線などの目印でリンクが区別されているか確認してください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
BACKGROUND_NOT_OPAQUE_AT_ROOT
- レポートに示された段落内のリンクを見つけてください。ページは不透明な背景を指定していないため、周囲にはブラウザーが描くキャンバス、またはフレーム内では周囲のページが表示されます。
- ページが表示される場所で確認してください。埋め込み先のページの中で、強制カラーをオフにして、ページが対応する各配色（ライトとダーク）で確認します。
- 各設定で、リンクの背景色が周囲の背景から際立っているか、または下線などの色以外の目印でリンクが区別されているか確認してください。
満たす場合：ページが表示されるすべての設定で、リンクの背景が周囲の背景から際立っているか、色以外の別の目印でリンクが区別されています。
満たさない場合：いずれかの設定でリンクの背景が周囲の背景と同じになり、3:1未満の色の違いだけでリンクが区別されるため、WCAG 1.4.1を満たしません（F73）。
BACKGROUND_OVERLAP
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- 色だけでなく、下線、太字、斜体、枠線などの目印でリンクが区別されているか確認してください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
COLOR_NOT_COMPUTABLE
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが画面上で下線、太字、斜体、枠線などの目印で区別されているか確認してください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
CONTRAST_HELPERS_UNAVAILABLE
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
ELEMENT_OPACITY
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。リンク自身のopacityによって色が変わるため、色は画面から読み取ってください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
ENGINE_EXCEPTION
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
LINK_COLOR_CONTRAST_ONLY
- レポートに示された段落内のリンクを見つけてください。レポートには周囲のテキストとのコントラストが示されています。
- リンクの上にポインターを置き、下線などの色以外の目印が現れるか確認してください。
- リンクのすぐ手前をクリックし、リンクにフォーカスが移るまでTabキーを押して、もう一度色以外の目印があるか確認してください。
満たす場合：ホバーとフォーカスのどちらでも、下線などの色以外の手がかりがリンクに加わります。
満たさない場合：ホバーやフォーカスで変わるのは色だけで、色だけでリンクを区別しているため、WCAG 1.4.1を満たしません（G183、F73）。
MIX_BLEND_MODE
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。合成によって色が変わるため、色は画面から読み取ってください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
PSEUDO_ELEMENT_COLOR
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。段落の最初の行や最初の文字にある場合は、その行のテキストと比べてください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
SELECT_OPTION_COLOR
- レポートに示されたドロップダウンを見つけ、選択肢のリストを開いてください。
- レポートに示された選択肢を、ほかの選択肢のテキストと並べて確認してください。
- 色以外のもの（下線、太字、目印）で区別されているか確認してください。色だけが異なる場合は、カラーピッカーのスポイトで両方の色を読み取り、コントラストが3:1以上あるか確認してください。
満たす場合：選択肢は色以外の手がかりで区別されているか、ほかのテキストとの色のコントラストが3:1以上あり、フォーカス時に色以外の手がかりがあります。
満たさない場合：3:1未満か、ほかの手がかりがない状態で、色だけで選択肢を区別しているため、WCAG 1.4.1を満たしません（F73）。
TEXT_DECORATION_NOT_RESOLVABLE
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが画面上で下線付きか、太字、斜体、枠線などの目印で区別されているか確認してください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
TEXT_SHADOW
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。テキストと共通の影は目印に含めません。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。
TEXT_STROKE
- レポートに示された段落内のリンクを見つけ、周囲のテキストと並べて確認してください。
- リンクが下線、太字、斜体、枠線などの目印で区別されているか確認してください。輪郭線が描画されるため、色は画面から読み取ってください。
- 色以外に違いがなければ、開発者ツールのカラーピッカーのスポイトで、描画されたリンクの色とテキストの色を読み取り、両者のコントラストが3:1以上あるか確認してください。
- 次に、リンクの上にポインターを置き、Tabキーでリンクに移動して、下線などの色以外の目印が現れることを確認してください。
満たす場合：リンクに下線、太字、枠線などの色以外の手がかりがあるか、リンクの色とテキストの色のコントラストが3:1以上あり、ホバーとフォーカスで色以外の手がかりが加わります。
満たさない場合：リンクに色以外の手がかりがなく、3:1未満の色の違いだけでテキストと区別されているか、ホバーとフォーカスで色以外の手がかりが加わらないため、WCAG 1.4.1を満たしません（F73）。