图像

乍一看，无障碍图片似乎是一个简单的主题 - 您可以添加 一些“替代文本”就大功告成了。不过，这个话题的主题 比某些人想象的要复杂在本节中，我们将介绍以下内容：

• 如何更新代码以使映像可供访问。
• 哪些信息应该与用户分享以及在哪里分享。
• 改进图片的其他方法，为残障人士提供帮助。

图片用途和背景信息

在编写任何代码之前，您必须首先考虑 以及图片的使用方式。问自己一些有关 图片的目的和背景可帮助你确定如何以最佳方式传达 将个人信息发送给 辅助技术 (AT) 例如屏幕阅读器

您可能会问自己：

• 图片是否对了解相应功能或网页的背景至关重要？
• 图片尝试传达哪些类型的信息？
• 图片是简单还是复杂？
• 图片是否会引发情绪或促使用户采取行动？
• 或者，图片只是看上去“眼花缭乱”没有真正的用途？

直观的流程图，例如 图片决策树、 可帮助您确定图片属于哪个类别。

尝试使用浏览器扩展程序或 其他方法。然后问问自己：“我是否了解剩下的内容？” 如果答案是肯定的，那么这很可能是一张装饰图片。否则， 从某种意义上来说是信息量丰富的，并且是必要的。在您 确定图片的用途，就可以确定最准确的编码方法 。

装饰图片

装饰图片是 视觉元素，即未添加其他背景或信息 以便更好地理解情境装饰性图片是对图片的补充 可以提供风格而非实质。

如果您认为某张图片具有装饰性，则必须以编程方式隐藏该图片 来自 ATS对要隐藏的图像进行编程时，它会向 AT 发送 不需要图片来了解网页内容、上下文或操作。那里 可通过多种方式隐藏图片，包括使用空/null 替代文本， 应用 ARIA 或 添加图片作为 CSS 背景下面举例说明了如何隐藏 提供精美装饰图片

alt 为空或 null

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

使用 <img> 元素 通过添加 alt 属性来实现，不论其文件类型是什么， 指向，例如 .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，它在视觉上被隐藏起来。

从“导航到首页”这一代码段中是 图片替代文字是“Lovely Ladybugs for your 草地。”使用屏幕阅读器收听徽标代码时，您会听到 以及通过一张图片传达出的动作和视觉效果。

<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> 元素。您可以通过编程方式将图片与包含 更长的说明。这种方法可以在图片之间建立紧密的关联 以及完整说明。扩展说明可以显示在 屏幕显示或隐藏起来，但建议保持可见，以便 更多人。

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

替代文本最佳实践

当然，提供替代文字是不够的。文字还应 有意义。例如，如果您的图片展示的是一群瓢虫在嚼 您奖品的叶子是玫瑰花丛，但替代文字是“虫子”会 传达图片的完整讯息和意图？当然不是。

替代说明需要尽可能多地捕获相关的视觉信息 尽可能简明扼要虽然 屏幕阅读器可以阅读，通常建议将替代文本大写 不超过 150 个字符以避免读者疲劳。如果您需要添加额外的 上下文，您可以使用某种复杂的图片模式，将 图片说明文字，或在主文案中进一步描述图片。

一些额外的替代文本最好 做法包括：

• 避免使用“图片”等字词或“照片”作为 屏幕阅读器会为您识别这些文件类型。
• 命名图片时，应尽可能保持一致且准确无误。图片 替代文本缺失或被忽略时，名称是备用文本。
• 避免使用非字母数字字符（例如 #、9 和 &），并使用短划线 。
• 尽可能使用正确的标点符号。如果没有此属性，图片描述就会 这听起来像是一句永不结束的长句。
• 请像人类（而不是机器人）一样编写替代文本。关键字堆砌的作用 无益 — 使用屏幕阅读器的人会对此感到厌烦，搜索引擎算法会对您进行惩罚。

检查您的理解情况

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