无障碍图片乍一看似乎是一个简单的主题，只需为图片添加一些“替代文本”即可。不过，这个话题比某些人想象的要复杂得多。在本部分中，我们将回顾以下内容：
- 如何更新代码以使图片可访问。
- 应与用户分享哪些信息以及在何处分享。
- 其他可用于改进图片以支持残障人士的方法。
图片用途和背景信息
在编写任何代码之前，请先考虑点状图像的用途、它将位于何处以及将如何使用。提出这些问题有助于您确定如何以最佳方式向使用辅助技术 (AT)（例如屏幕阅读器）的人员传达信息。
您可能会问自己：
- 图片对于理解功能或网页的上下文是否至关重要？
- 图片试图传达什么类型的信息？
- 图片是简单还是复杂？
- 图片是否能引起用户的情感共鸣或促使用户采取行动？
- 还是说图片只是视觉上的“糖果”，没有实际用途？
直观的流程图（例如图片决策树）可帮助您确定图片所属的类别。
尝试使用浏览器扩展程序或其他方法隐藏网站或 Web 应用中的图片。然后问自己：“我是否了解剩余的内容？” 如果答案是“是”，则该图片很可能属于装饰性图片。如果不是，则图片在某种程度上具有信息性，并且在上下文中是必需的。确定图片用途后，您就可以确定最准确的编码方式。
装饰型图片
装饰型图片是一种视觉元素，不会添加额外的背景信息或有助于用户更好地了解背景信息的信息。装饰性图片是补充性图片，可能提供的是风格而不是实质内容。
如果您决定将图片标记为装饰性图片，则必须以编程方式向辅助技术隐藏该图片。当您将图片编程为隐藏状态时，这会向辅助技术 (AT) 表明，无需该图片即可了解网页的内容、背景信息或操作。隐藏图片的方法有很多，包括使用空或 null 文本替代内容、应用 ARIA 或将图片添加为 CSS 背景。以下是一些示例，说明了如何向用户隐藏装饰性图片。
alt 为空或 null
空或 null 替代文本属性与缺失的替代文本属性不同。如果缺少替代文本属性，辅助技术可能会读出文件名或周围的内容，以便为用户提供有关图片的更多信息。
角色设置为 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 默认会跳过它们。
如果 SVG 是装饰性图片，则没问题，AT 会按预期忽略它。但如果您的 SVG 是信息性图片，请向元素添加 ARIA role="img"，以便 AT 将其识别为图片。
其次，<svg> 元素不使用 alt 属性，因此必须使用不同的编码方法来为信息性图片添加替代说明。
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
功能型图片
功能型图片与操作相关联。功能性图片的示例包括：链接到首页的徽标、用作搜索按钮的放大镜，或将您定向到其他网站或应用的社交媒体图标。
与信息性图片一样，功能性图片也必须包含替代说明，以便所有用户了解其用途。与信息型图片不同，每个功能型图片都需要描述图片操作，而不是视觉方面。
在徽标示例中，图片既是信息型图片，也是可操作的图片，因为它既能传达信息，又能充当链接。在这些情况下，您可以为每个元素添加替代说明，但这不是必需的。
为图片添加替代说明的一种方法是通过视觉上隐藏的文本来实现。使用此方法时，屏幕阅读器会读取文本，因为文本位于 DOM 中，但借助自定义 CSS，文本在视觉上处于隐藏状态。
从代码段中可以看出，“Navigate to the homepage”是封装容器标题，而图片替代文本是“Lovely Ladybugs for your Lawn”。当您使用屏幕阅读器收听徽标代码时，您会听到一张图片中传达的视觉信息和操作信息。
<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>
为图片添加更多说明的一种方法是链接到资源，或者提供跳转链接以在页面上稍后显示更长的说明。此方法不仅适合辅助技术用户，还有助于有认知障碍、学习障碍和阅读障碍等残障人士，他们可能会受益于屏幕上随时可用的这些额外图片信息，而不是隐藏在代码中的信息。
您还可以使用另一种方法，即将 aria-describedby 属性附加到 <img> 元素。您可以以编程方式将图片与包含更长说明的 ID 相关联。此方法可在图片与完整说明之间建立紧密的关联。扩展说明可以显示在屏幕上，也可以在视觉上隐藏，但建议您保持其可见性，以便为更多用户提供支持。
另一种将简短替代说明与较长的替代说明分组的方法是使用 <figure> 和 <figcaption> 元素。这些元素的行为与 aria-describedby 类似，它们在语义上对元素进行分组，从而在图片及其说明之间建立更强的关联。
添加 ARIA role="group" 可确保向后兼容不支持 <figure> 元素语义的旧版 Web 浏览器。
替代文本方面的最佳实践
当然，仅添加替代文本是不够的。文本也应有意义。例如，如果您的图片是关于一群瓢虫啃食您珍贵的玫瑰灌木的叶子，但您的替代文本是“虫子”，这是否能传达图片的完整信息和意图？绝对不会。
替代性描述需要尽可能多地包含相关视觉信息，并且要简洁明了。虽然屏幕阅读器可以读取的字符数没有限制，但通常建议将替代文本的长度限制为 150 个字符或更少，以免读者感到疲劳。如果您需要为图片添加更多背景信息，可以使用复杂的图片模式、添加图片说明文字，或在正文中进一步描述图片。
以下是一些额外的替代文本最佳实践：
- 避免在描述中使用“…的图片”或“…的照片”等字词，因为屏幕阅读器会为您识别这些文件类型。
- 为图片命名时，请尽可能保持一致性和准确性。当替代文本缺失或被忽略时，系统会回退到使用图片名称。
- 避免在图片名称或替代文本中使用非字母字符（例如 #、9、&），并使用短划线而非下划线来分隔字词。
- 尽可能使用正确的标点符号。如果没有它，图片描述听起来就像一个永无止境的长句。
- 撰写替代文本时，请像人类一样自然表达，而不是像机器人一样生硬。关键字堆砌对任何人都没有好处，使用屏幕阅读器的用户会感到恼火，搜索引擎算法也会对您进行惩罚。