无障碍 (a) 规则 - 3

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《无障碍 (a) 规则 - 3》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

图片

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

装饰图像

• 如果图像没有添加额外的上下文或信息（装饰图像）来让用户更好地理解上下文，那么它应该对辅助技术 (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 属性，请使用替代编码方法来提供描述。