達成基準 2.4.4、達成基準 2.4.9、及び達成基準 4.1.2 の失敗例 - リンクで唯一のコンテンツである画像にアクセシブルな名前 (accessible name) が提供されていない

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

リンクを提供するコンテンツ

これは、次の達成基準に関する達成方法である:

解説

この文書は、画像のような非テキストコンテンツのみで提供されているリンクについて、そしてそのリンクがアクセシブルな名前で特定できないときに起こる失敗例について述べている。リンクのアクセシブルな名前 (name) は Accessible Name and Description Computation によって決定される。

これはテキスト及び画像が同じリンク先に別々にリンクしている場合にも適用される。このケースでは、実装方法 H2: 同じリソースに対して隣接する画像とテキストリンクを結合する は別々のリンク及び望ましくない冗長性を減少させるのに推奨される方法である。

事例

例 1: HTML 検索結果

検索サイトは、試合のサイトへのテキストリンク及び画像リンクの両方を含んだ検索結果を返す。 検索結果には既にテキストリンクがあるため、画像の alt 属性は空になっている。 しかし、スクリーンリーダーは画像リンクを無視しないで、リンクの目的が説明されていそうなテキストを見つけるための推測に基づいた修復を試みる。 例えば、スクリーンリーダーは「football dot gif Football Scorecard」と読み上げるかもしれない。

 <a href="scores.html">
   <img src="football.gif" alt="" />
 </a>
 <a href="scores.html">
   Football Scoreboard
 </a>
}

参考リソース

参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

  1. リンクが非テキストコンテンツのみを含むかどうかを確認する。
  2. 非テキストコンテンツが、role="presentation" 又は alt=""を用いるなど、支援技術により無視される方法で実装されているかどうかを確認する。
  3. そのリンクに、aria-label 又は aria-labelledby のような他の方法でアクセシブルな名前 (name) が提供されていないことを確認する。

期待される結果

  • 上記の全ての結果が真である場合、この失敗例の条件は適用され、コンテンツは達成基準の失敗となる。