无障碍 (a) 规则 - 3

图片

这不仅仅是向图像添加替代文本；远不止这些。

装饰图像

• 如果图像没有添加额外的上下文或信息（装饰图像）来让用户更好地理解上下文，那么它应该对辅助技术 (AT) 隐藏，例如屏幕阅读器。

• 使用以下任何一种方法来隐藏 AT 中的图像：

  • 空文本替代 (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 属性，请使用替代编码方法来提供描述。

Method	Use Case	Pros	Cons