无障碍 (a) 规则 – 3

图片

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

装饰图像

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

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

  • 空文本替代 (alt)
  • 应用 aria
  • 添加图像作为 css 背景

<!-- all of these choices lead to the same result. --> @@##@@ @@##@@ @@##@@ 

• 如有疑问，请为图像添加描述。

空或 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

信息丰富的图像

• 如果图像传达概念、想法或情感，您应该包含描述图像用途的程序化替代文本。

• 尽可能添加非常详细的图像描述。

例如

@@##@@ 

• 如果图像是（内联），请添加 role=”img”。

• 由于元素不支持 alt 属性，请使用替代编码方法来提供描述。

功能图像

• 任何具有功能性目的的图像（例如，链接到主页的徽标、用作搜索按钮的放大镜图标）都应包含适当的替代文本。

• 替代文本应描述图像的操作，而不是其视觉方面。

• 如果图像既提供信息又具有可操作性，您可以为每个元素添加替代描述 – 但这不是必需的。例如

<div title="navigate to the homepage">    <a href="/">       @@##@@    </a> </div> 

复杂图像

• 如果图像需要比装饰性、信息性或功能性图像更多的解释（包括信息图表、地图、图形/图表和复杂插图），请使用这些方法中的任何一种来添加替代描述

• 链接到资源或提供跳转链接到页面稍后的较长说明。例如

@@##@@ <a href="ladybug-science.html">learn more about the anatomy of a ladybug</a> 

• 将 aria-scribedby 属性附加到 元素，然后将图像链接到包含较长描述的 id。例如

 @@##@@  <p id="description">in this course, you will learn more about the      anatomy of a ladybug, including the head,      antenna, eye, pronotum, elytra, leg, abdomen, and wing.  </p> 

• 将简短的替代描述与较长的描述分组是使用
  

  和

 <figure role="group">       @@##@@       <br><br>       <figcaption>         <a href="ladybug-science.html">Learn more about the anatomy of a          ladybug</a>       </figcaption>   </figure> 

替代文本最佳实践

• 建议将替代文本限制在 150 个字符或更少，以避免读者疲劳。

• 避免在说明中使用 “图像” 或 “照片” 等词语，因为屏幕阅读器会识别这些文件类型。

• 命名图像时，尽可能保持一致和准确。当替代文本丢失或被忽略时，图像名称是后备。

• 避免使用非字母字符（例如 #、9、&）

• 在图像名称或替代文本中使用单词之间的破折号，而不是下划线。

• 尽可能使用正确的标点符号。如果没有它，图像描述听起来就像是一个漫长的、永无休止的连续句子。

• 像人类而不是机器人一样编写替代文本。关键字堆砌对任何人都没有好处——使用屏幕阅读器的人会感到恼火，搜索引擎算法会惩罚他们。