達成基準 1.1.1 の失敗例 - img 要素、area 要素、及び type "image" の input 要素の alt 属性又はテキストによる代替を省略している

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

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

適用 (対象)

HTML 及び XHTML

これは達成基準 1.1.1: 非テキストコンテンツ (失敗例) に関する達成方法である。

解説

この文章では、画像のテキストによる代替の失敗条件を示す。画像の代替を提供するテキストがない場合、支援技術は画像を識別することも、その目的を利用者に伝えることもできない。alt 属性は画像の代替テキストを提供するための好ましい実装方法であり続ける。アクセシビリティ サポーテッドである限り、適切な WAI-ARIA 属性を使用して代替テキストを提供することができる。アクセシビリティ サポートの詳細については、アクセシビリティ サポートを文書化するを参照する。Accessible Name and Description Computationは、要素の HTML 属性及び WAI-ARIA 属性から代替テキストを導出する方法を解説した。

いくつかの支援技術は、画像のファイル名を読み取ることにより、欠落しているテキストによる代替を補うことを試みる。しかし、多くの理由からファイル名に単純に頼るのは不十分である。例えば、ファイル名は説明的ではない場合があり (例 images/nav01.gif)、技術仕様には説明的なファイル名は必須ではない。そして多くの支援技術は HTML 属性を介して提供されるテキストによる代替がない場合はファイル名を読み取らない。

事例

事例 1: テキストによる代替が存在しない

以下のコード例において、スクリーンリーダーを使っている人は画像の目的を知ることはできない。

<img src="../images/animal.jpg" />

参考リソース

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

検証

手順

imgarea 及び type が imageinput を特定する。これらの要素のそれぞれについて:

  1. alt 属性が存在するかどうかを確認する。
  2. aria-labelledby 属性が存在するかどうかを確認し、かつページ内の一つ以上の id 要素を参照し、かつ aria-labelledbyアクセシビリティ サポーテッドかどうかを確認する。
  3. aria-label 属性が存在するかどうかを確認し、かつ aria-labelアクセシビリティ サポーテッドかどうかを確認する。
  4. title 属性が存在するかどうかを確認し、かつ titleアクセシビリティ サポーテッドかどうかを確認する。

期待される結果

  • 1.、2.、3.、及び 4. の全ての結果が偽である場合、この失敗条件が適用される。