アクセシビリティ (a) ルール - 3

画像

画像に 代替テキスト を追加するだけではありません。それはそれをはるかに超えています。

装飾画像

• 画像が追加のコンテキストや、ユーザーがコンテキストをよりよく理解できるようにする情報 (装飾画像) を追加しない場合は、スクリーン リーダーなどの支援技術 (AT) からその画像を非表示にする必要があります。

• AT から画像を非表示にするには、次のいずれかの方法を使用します:

  • 空または null の代替テキスト (alt)
  • ARIA の適用
  • 画像を CSS 背景として追加します

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

• 疑問がある場合は、画像に説明を追加してください。

空または null の alt

• 画像が純粋に装飾的なものでない限り、画像の alt 属性を「」に設定しないでください。

Attribute	Example	Screen Reader Behavior	Use Case
alt="" (Empty)		Ignores the image completely	Decorative or non-informative images
Missing alt		May read the filename/URL	Not recommended; implies negligence

有益な画像

• 画像がコンセプト、アイデア、または感情を伝える場合は、画像の目的を説明するプログラムによる代替テキストを含める必要があります。

• 可能な限り、画像の詳細な説明を追加します。

例:

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• 画像が (インライン) の場合は、role="img" を追加します。

• 要素は alt 属性をサポートしていないため、別のコーディング方法を使用して説明を提供します。