从表面上看，无障碍图片似乎是一个简单的主题，您只需向图片添加一些“替代文本”即可。但是，这个主题比某些人想象的要细致得多。在本节中，我们将回顾：
- 如何更新代码，使图片具有无障碍功能。
- 应与用户共享哪些信息，以及在何处共享这些信息。
- 改进图片以支持残障人士的其他方法。
图片用途和上下文
在您编写任何代码行之前，请先思考图片的目的、它将位于何处以及将如何使用它。问自己这些问题可以帮助您确定如何最好地向使用辅助技术 (AT)（例如屏幕阅读器）的人员传达信息。
您可能会问自己：
- 图片对于理解功能或页面的上下文是否至关重要？
- 图片试图传达哪种类型的信息？
- 图片是简单还是复杂？
- 图片是否会引起情感或提示用户采取行动？
- 或者图片只是没有实际用途的视觉“花絮”？
视觉流程图（例如图片决策树）可以帮助您确定您的图片属于哪个类别。
尝试使用浏览器扩展程序或其他方法隐藏您网站或 Web 应用上的图片。然后问问自己：“我是否理解剩余的内容？”如果答案是肯定的，则它很可能是一张装饰性图片。如果不是，则图片在某种程度上是信息性的，并且在上下文中是必要的。一旦您确定了图片的用途，您就可以确定最准确的编码方式。
装饰性图片
装饰性图片是一种视觉元素，它不会添加额外的上下文或信息，使用户能够更好地理解上下文。装饰性图片是补充性的，可能提供的是样式而不是实质内容。
如果您确定图片是装饰性的，则必须以编程方式将其从 AT 中隐藏。当您对图片进行编程以使其隐藏时，它会向 AT 发出信号，表明不需要该图片来理解页面的内容、上下文或操作。隐藏图片的方法有很多种，包括使用空或空文本替代方案、应用 ARIA 或将图片添加为 CSS 背景。以下是一些如何向用户隐藏装饰性图片的示例。
空或空 alt
空或空替代文本属性与缺失的替代文本属性不同。如果替代文本属性缺失，则 AT 可能会读出文件名或周围内容，以便为用户提供有关图片的更多信息。
角色设置为 presentation 或 none
角色设置为 presentation 或 none 会从可访问性树的公开中删除元素的语义。同时，aria-hidden= "true" 会从可访问性 API 中删除整个元素及其所有子元素。
<!-- 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">
谨慎使用 aria-hidden，因为它可能会隐藏您不想隐藏的元素。
CSS 中的图片
当您使用 CSS 添加背景图片时，屏幕阅读器无法检测到图片文件。在应用此方法之前，请确保您希望隐藏图片。
信息性图片
信息性图片是一种传达概念、想法或情感的图片。信息性图片包括真实世界物体的照片、基本图标、简单绘图和文本图片。
如果您的图片是信息性的，则应包含程序化替代文本来描述图片的用途。替代图片描述（通常缩写为“替代文本”）为 AT 用户提供了更多关于图片的上下文，并帮助他们更好地理解图片的消息或意图。
通过包含 alt 属性，可以为 <img> 元素添加替代描述，无论它指向的文件类型是什么，例如 .jpg、.png、.svg 等。
<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
但是，当您以内联方式使用 <svg> 元素时，您需要注意无障碍功能。
首先，由于 SVG 是语义编码的，因此 AT 默认会跳过它们。如果您有装饰性图片，则这不是问题，AT 会按预期忽略它。但是，如果您有信息性图片，则需要在模式中添加 ARIA role="img"，以便 AT 将其识别为图片。
其次，<svg> 元素不使用 alt 属性，因此必须使用不同的编码方法来代替，以便向您的信息性图片添加替代描述。
<svg role="img" ...>
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
功能性图片
功能性图片与操作相关联。功能性图片的示例包括链接到主页的徽标、用作搜索按钮的放大镜或将您定向到其他网站或应用的社交媒体图标。
与信息性图片一样，功能性图片也必须包含替代描述，以告知所有用户其用途。与信息性图片不同，每个功能性图片都需要描述图片的操作，而不是视觉方面。
在徽标示例中，图片既是信息性的又是可操作的，因为它既是传达信息的图片，又充当链接。在这些情况下，您可以向每个元素添加替代描述，但这不是必需的。
向图片添加替代描述的一种方法是通过视觉上隐藏的文本。当您使用此方法时，屏幕阅读器会读取文本，因为它在 DOM 中，但它在视觉上是隐藏的，这要归功于自定义 CSS。
您可以从代码片段中看到，“导航到主页”是包装器标题，而图片替代文本是“草坪上可爱的瓢虫”。当您使用屏幕阅读器收听徽标代码时，您会听到一个图片中传达的视觉效果和操作。
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
复杂图片
复杂图片通常比装饰性、信息性或功能性图片需要更多的解释。它需要简短和冗长的替代描述来传达完整的消息。复杂图片包括信息图、地图、图形/图表和复杂插图。
与其他图片类型一样，您可以使用不同的方法向复杂图片添加替代描述。
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
向图片添加额外解释的一种方法是链接到资源，或者提供跳转链接以链接到页面稍后部分的更长解释。此方法是一个不错的选择，不仅适用于 AT 用户，而且还有助于患有认知障碍、学习障碍和阅读障碍等残疾人士，他们可能受益于在屏幕上轻松获得此额外图片信息，而不是将其埋藏在代码中。
您可以使用的另一种方法是将 aria-describedby 属性附加到 <img> 元素。您可以以编程方式将图片链接到包含更长描述的 ID。此方法在图片和完整描述之间创建了牢固的关联。扩展描述可以显示在屏幕上或在视觉上隐藏，但请考虑使其可见，以支持更多人。
将简短替代描述与更长描述分组的另一种方法是使用 <figure> 和 <figcaption> 元素。这些元素的作用类似于 aria-describedby，因为它们在语义上对元素进行分组，从而在图片及其描述之间形成更牢固的关联。
添加 ARIA role="group" 可确保与不支持 <figure> 元素语义的旧版 Web 浏览器向后兼容。
替代文本最佳实践
当然，仅包含替代文本是不够的。文本也应该有意义。例如，如果您的图片是关于一群瓢虫正在啃食您珍贵的玫瑰花丛的叶子，但您的替代文本写的是“虫子”，这是否能传达图片的完整信息和意图？绝对不能。
替代描述需要尽可能多地捕获相关的视觉信息，并且要简洁明了。虽然屏幕阅读器可以读取的字符数没有限制，但通常建议将您的替代文本限制为 150 个字符或更少，以避免阅读器疲劳。如果您需要向图片添加额外的上下文，您可以使用复杂图片模式之一，添加标题文本，或在正文中进一步描述图片。
一些其他的替代文本最佳实践包括：
- 避免在描述中使用“图片，图像，照片”之类的词语，因为屏幕阅读器会为您识别这些文件类型。
- 在命名图片时，请尽可能保持一致和准确。当替代文本丢失或被忽略时，图片名称是一种后备方案。
- 避免在图片名称或替代文本中使用非字母字符（例如，#、9、&），并在单词之间使用短划线而不是下划线。
- 尽可能使用正确的标点符号。如果没有标点符号，图片描述听起来会像一个永无止境的长句。
- 像人一样编写替代文本，而不是像机器人一样。堆砌关键词对任何人都没有好处，使用屏幕阅读器的人会感到恼火，搜索引擎算法也会惩罚您。
检查您的理解情况
测试您的知识。
如何使复杂图片具有无障碍功能？
aria-describedby 属性。