image-redundant-alt

画像の代替テキストを隣接する可視テキストと重複させてはいけません

manual確度:medium重大度:minorperceivable

<img>の代替テキストが、直接の親要素にすでにある他の可視テキストと同一でないことを確認します。

適用範囲:空でない代替テキストを持つ<img>要素のうち、直接の親要素がほかにも可視のテキストコンテンツを持つもの(つまり画像以外のテキストノードがある。アイコン画像とテキストラベルの両方を囲む<a>や<button>によくあるケース)に適用されます。確認を求める対象が見つからない場合は、passではなくnotApplicableを報告します。このルールが適用されるのはチェックが検出するものだけであり、そこに何も見つからなくても、すべて問題ないことは示されないためです。

期待される結果:画像の代替テキストが、同じ親にすでにある他の可視テキストと同じ(大文字と小文字を区別せず正規化して比較)ではありません。両方がある場合、支援技術は1つのコントロールについて同じ言葉を2回読み上げます(例:アイコンの代替テキストがリンクテキストと重複しているアイコン付きテキストリンク)。

検出結果が報告する内容:

  • alt:画像の代替テキストで、空白をまとめたものです。隣にあるテキストと一致しています。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

can't tell
<a href="/"><img alt="Home" src="home.png">Home</a>

画像のaltテキスト(「Home」)が隣接する可視のリンクテキストと一字一句同じで、スクリーンリーダーは2回読み上げます。

n/a
<a href="/"><img alt="Home icon" src="home.png">Home</a>

altテキスト(「Home icon」)が隣接するテキスト(「Home」)と異なります。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

IMAGE_ALT_REDUNDANT

  1. レポートに示された画像と、同じリンク、ボタン、または親要素の中でその隣にあるテキストを見つけてください。
  2. スクリーンリーダーでそのリンクまたはボタンに移動するか、アクセシビリティペインで算出された名前を読み、同じ言葉が2回読まれるか確認してください。
  3. 画像がすでに支援技術から隠されている場合は、繰り返されるものがないことを控えてください。

満たす場合:言葉は1回だけ読まれます。画像は隠されているかalt=""を持つか、そのaltがテキストにない内容を補っています。

満たさない場合:画像のaltが隣のテキストを繰り返しているため、同じ言葉が2回読まれます。これはベストプラクティスを満たしていません(H2)。

ソースコードを見る