图像

可访问的图片乍一看似乎很简单，只需向图片中添加一些“替代文本”，就大功告成了。但是，这个话题要比一些人想象的更加精细在本节中，我们将介绍以下内容：

• 如何更新代码，使图片可供访问。
• 应与用户分享哪些信息以及分享位置。
• 通过其他方式改进图片，为残障人士提供支持。

图片用途和上下文

在编写一行代码之前，您必须首先考虑映像的点以及将如何使用它。询问自己有关图片的用途和上下文的问题，有助于您确定如何以最佳方式将信息传达给使用屏幕阅读器等辅助技术 (AT) 的用户。

您可以这样问自己：

• 这张图片对理解功能或页面的背景信息至关重要？
• 图片尝试传达什么类型的信息？
• 图片是简单还是复杂？
• 图片是否会引发情绪或提示用户采取行动？
• 还是图片只是视觉上的“吸睛效果”，没有真正的用途？

直观的流程图（如图片决策树）可帮助您确定图片所属的类别。

请尝试使用浏览器扩展程序或其他方法隐藏网站或 Web 应用中的图片。然后问问自己：“我能了解剩余的内容吗？” 如果答案是肯定的，那么它很可能是装饰性图片。否则，图片就会以某种方式提供信息且必须具备上下文。确定图片的用途后，就可以确定最准确的图片编码方法。

装饰型图片

装饰性图片是一种视觉元素，它不会添加额外的上下文或信息，让用户更好地了解上下文。装饰型图片是补充图片，可能仅体现风格而非实质内容。

如果您认为某张图片是装饰性的，则必须以程序化方式对 AT 隐藏该图片。当您对要隐藏的图片进行编程时，它会向 AT 表明无需该图片即可了解网页内容、上下文或操作。您可以通过多种方式隐藏图片，包括使用空/null 替代文本、应用 ARIA，或将图片添加为 CSS 背景。以下示例说明了如何向用户显示装饰性图片。

空或 null alt

空白/null 替代文本属性与缺少的替代文本属性不同。如果缺少替代文本属性，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 用户提供有关图片的更多背景信息，并帮助他们更好地理解图片传达的讯息或意图。

无论指向哪个文件类型（例如 .jpg、.png、.svg 等），使用 <img> 元素的简单替代说明都可以通过添加 alt 属性来实现。

<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 的帮助下可通过视觉隐藏起来。

从代码段中可以看出，“导航到首页”是封装容器标题，图片替代文字是“可爱的 Ladybugs for your Lawn”。当您使用屏幕阅读器读出徽标代码时，您会听到通过一张图片传达的视觉内容和操作。

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </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 相关联。这种方法在图片与完整说明之间建立了牢固的关联。扩展说明可以显示在屏幕上，也可以在视觉上隐藏，但请考虑让它保持可见，以支持更多用户。

将简短的备选说明与较长的说明进行分组的另一种方法是使用 HTML5 <figure> 和 <figcaption> 元素。这些元素的行为与 aria-describedby 类似，因为它们从语义上对元素进行分组，从而在图片与其说明之间形成更强的关联。添加 ARIA role="group" 可确保向后兼容不支持 <figure> 元素的原生语义的旧版网络浏览器。

替代文本最佳实践

当然，包含替代文本还不够。文字内容也要有意义。例如，如果您的图片展示的是一群瓢虫在咬您奖品玫瑰树的叶子，但您的替代文字是“虫子”，这样可以传达图片的完整信息和意图吗？当然不是。

替代说明需要尽可能多地捕获相关的视觉信息并简洁。虽然屏幕阅读器可以阅读的字符数没有限制，但通常建议将替代文本的上限设置为 150 个字符或更少，以避免读者疲劳。如果需要向图片添加其他上下文，可以使用一种复杂的图片模式、添加图片说明文本，或在主副本中进一步描述图片。

一些其他的替代文字最佳实践包括：

• 避免在说明中使用“图片”或“照片”等字词，因为屏幕阅读器会为您识别这些文件类型。
• 为图片命名时，请尽可能一致且准确地命名。当替代文本缺失或忽略时，图片名称是一种后备图片。
• 避免使用非字母字符（例如 #、9 和 &），在图片名称或替代文本中，在字词之间使用短划线而不是下划线，而不是使用下划线。
• 尽可能使用正确的标点符号。没有它的话，图片描述听起来就会像是一个长长的永无休止的句子。
• 以人工而不是机器人的口吻撰写替代文本。关键字堆砌对任何人都没有好处 - 使用屏幕阅读器的用户会很恼火，而搜索引擎算法也会对您做出惩罚。

检查您的掌握程度

测试您对 ARIA 和 HTML 知识的掌握情况