使用无障碍图像
学习目标
完成本单元后，您将能够：
- 总结为图像和图形编写替换文字的最佳实践。
- 确保图像在您的内容中可访问。
- 说明使用没有完整和准确的替换文字的图像有何潜在影响。
无障碍图像的重要性
无障碍图像为许多类型的用户提供了重要的意义和价值。
视力受损或失明的用户以及难以处理大量信息或容易分心的用户依赖屏幕阅读器来理解图像。此外，就算没有视觉和认知障碍，很多用户也会关闭图像以节省数据流量。
所有用户从替换文字和周围文字中获得的信息必须和能看到图像时相同。
有助于确保屏幕阅读器可以访问图像的两个要求是替换 (alt) 文字属性和描述性文本。
替换 (Alt) 文字属性
所有图像都需要一个替换 (alt) 文字属性。对于为周围内容提供意义和上下文的图像，替换文字属性包含对图像意义或目的的简短描述。相关信息在很大程度上取决于图像的上下文。如果图像没有提供额外的含义或用途，则替换文字属性将设置为空字符串。
描述性文本
当必须传达的信息超过建议的替换文字限制时，需要使用描述性文本。描述性文本是关于您包含在主内容中的图像的信息。描述性文本提供对图像的简短总结（如果很明显），并根据上下文描述图像中提供的数据。
例如，如果图像包括图标或图形，则替换文字会总结所显示数据的主题，描述性文本则提供关于数据的详细信息。如需了解要传达关于图片的什么信息，请思考为什么要包含这张图像。
对于较为复杂的图像，例如示意图、图表和信息图表信息，请在图像周围的描述性文本中提供尽可能多的信息，而不是在替换文字中。描述信息、信息的属性以及不同的信息片段如何相互关联。尽可能使用表格或列表来描述图表或信息图传达的数据。然后用替换文字说明图片对应描述性文本，例如：alt=“对应信息图表”。
替换文字和描述性文本的组合必须是对图像含义的有效总结，这样对于有障碍的用户或关闭图像的用户才不会有任何损失。所有用户从替换文字和周围文字中获得的信息必须和能看到图像时相同。
提供描述性文本和替换文字并没有一种一体适用的正确方法，只要这两个元素的组合能为屏幕阅读器用户提供与描述性文本和图像为其他用户提供的相同级别的含义即可。
搜索引擎使用替换文字来对图像进行索引，因此通过在替换文字中提供经过深思熟虑的图像描述，您还可以提高内容的可搜索性！然而，虽然替换文字具有 SEO 优势，但您的首要任务是正确传达描述性信息。在必要和适用的情况下使用关键字，但仅当它们适用于所描述的图像时才使用。
图像类型
图像可以是装饰性的，也可以是信息性的。
装饰性图像（页面边框和彩色横幅等）没有任何意义。它们的唯一目的是让页面看起来有趣。
因为装饰性图像并不会增加意义，所以我们希望屏幕阅读器跳过它们。为此，请将替换文字设置为空字符串，例如 alt=””。
信息性图像为用户提供信息和意义，例如屏幕截图、流程图、架构图和图表。因为它们传达信息或意义，因此信息性图像需要替换文字来总结图像所传达的意义。更复杂的图像则需要描述性文本来提供有关图像中包含的数据或其他信息的更多详细资料。确保不要在替换文字和描述性文本中重复相同信息。
如果您不确定图像是信息性的还是装饰性的，请将其从内容中删除，然后确定是否缺少任何必要的信息或含义。如果没有图像就没有信息，那么图像是信息性的，需要替换文字。
始终是信息性的图像类型包括：
- 作为链接的图像
- 链接中包含的图像
- 包含有意义文本的图像
- 徽标
请记住，许多图像提供了丰富的视觉细节，但没有很多重要信息。如果图像的含义可以通过简单的观察来理解，那么描述也应该是简短的。在为图像编写替换文字时，请思考您会如何向其他人口头描述该图像。
替换和描述性文本最佳实践
下表包含创建替换文字时的重要注意事项。
替换文字注意事项
| 无障碍 | 有障碍 |
|---|---|
|
采用具体而简洁的写法，替换文字应不超过 125 个字符。 |
编写包含无关细节的冗长替换文字。 |
|
专注于与图像上下文相关的图像细节。 |
包括不明确的替换文字或带有短语“…的图像”或“…的图形”的前导替换文字。 屏幕阅读器和其他辅助技术已经提醒用户他们正在关注图像，所以在这种情况下，用户会听到图像这个词两次。 |
|
使用与周围文字相同的语气和语调。 |
使用全大写文字。一些屏幕阅读器无法将全部为大写字母的单词识别为单词，而是会假定它们是首字母缩写词。发生这种情况时，他们会单独阅读每个字母，比如会将 IMPORTANT 读成 I、M、P、O、R、T、A、N、T。如果需要这种效果，请使用 CSS 将文本转换为大写。 |
|
将替换文字视为面向用户的文本，并使用句子大小写、正确的语法和正确的标点符号。必要时，您可以使用不完整的句子来描述图像。 屏幕阅读器在读到替换文字中的句号后会短暂地停一下，从而为用户提供更好的体验。 |
将文件名、路径放在替换文字中。 00451.jpg 这样的替换文字对于盲人用户来说完全没有意义。 |
|
如果图像是装饰性的，则包括一个空的替换文字属性。空的替换文字属性会强制屏幕阅读器跳过它们。 |
跳过替换文字属性。如果屏幕阅读器遇到没有替换文字属性的图像，它会读出<图像 src> 标签，通常类似于 /images/weji2362iofweio6.png。 |
|
编写不同于描述性文本的独特替换文字。 |
在文档和 alt 属性中重复替换文字。 |
替换文字是您内容的一部分，而不是额外的内容。当您编写图像周围的内容时，请编写替换文字和描述性文本。起草初始内容后再编写的替换文字通常不够完整和有效。您可能不记得为什么包含图像或有关该图像的详细信息。最佳做法是在创作内容时就编写替换文字，而不是之后添加。
好的描述性和替换文字需要思考和努力。没有唯一的正确答案。它需要您考虑有残疾和没有残疾的用户，以及如何最好地向每个人传达必要的意义和目的。编写简洁而有意义的替换文字需要时间和练习。
当您为图像编写描述性文本和替换文字时，您可能会发现图像比您想象的要复杂，进而需要额外的周围文本来传达所需的含义。或者您可能会确定图像并未传达任何附加信息并将其删除。
您对用户体验的思考越多，越能从用户的角度出发，您写出的内容也会越好。
让我们总结一下
使用图像时，提供替换文字和描述性文本可以有效地将图像中的信息传达给各种用户，如果没有这些文字，他们将无法访问该信息。如果没有图像中提供的含义，这些用户的用户体验就会大打折扣。通过掌握替换文字和描述性文本的基本原则，确保每个人都能更好地访问您的内容。
在下一个单元中，我们将看一些创建替换文字的示例。
资源
- W3C：页面结构概念
- WebAIM：替换文字
- 国家无障碍媒体中心：体验+学习 / 教育媒体 / 数字有声书籍中科学内容描述的有效实践 / NCAM
