“您希望屏幕阅读器每天在您耳边大声朗读 40 次哪个文件名？”这是一个有点荒谬的问题，但这正是当有意义的图像留下 alt="image1.jpg" 或者更糟糕的是根本没有替代文本时会发生的情况。这篇文章是编写替代文本的实用指南，它确实有帮助——不仅是呈现，而且是好的。
简而言之 — 本指南涵盖的内容
为什么错误的替代文本几乎与缺少替代文本一样糟糕
根据 WCAG 1.1.1，所有非文本内容都必须有替代文本 — 但正式要求只是故事的一半。 “image1.jpg”、“image”或“logo”在技术上满足要求（有 alt 属性），但它们不传达任何真实信息。屏幕阅读器用户听到一串“image... image... image23.png”时，所感到的挫败感不亚于视力正常的用户看到一系列空帧。
如何编写好的替代文本
指导规则：在图像出现的上下文中描述图像的信息，而不是对您所看到的内容进行字面描述。团队会议中人们围坐在桌子旁的照片，附有一篇有关协作的文章，可以给出“团队围着桌子一起工作”，而不是“人们的照片”。对于图表或图形，请描述图表呈现的要点：“条形图显示第三季度销售额增长 40%”明显优于“条形图”。
- 简短而有目的——通常 1-2 句话就足够了；无需描述每个视觉细节。
- 跳过“图像”或“图片” - 屏幕阅读器已经宣布它是图像，因此无需重复。
- 考虑周围的文本 - 同一张图像在不同的上下文中可以得到不同的替代文本。
何时有意将替代文本留空
并非每个图像都需要描述。纯粹的装饰性图像——图形分割线、背景插图、只是重复附近文本的图标——最好用alt=""（空替代文本，没有丢失），因此屏幕阅读器完全跳过它们。 “缺失”和“故意为空”之间的区别至关重要：缺失听起来像是错误或读出了文件名；故意留空只是默默地跳过它。
💡实用技巧
快速测试：如果您从页面中完全删除图像，看不到该图像的用户会丢失任何内容吗？如果不是——它可能是装饰性的，适合空的替代品。
如何处理复杂的图表和图表
对于复杂的数据图表、带插图的比较表或具有多层信息的信息图，简短的替代文本是不够的 - 有太多的信息需要传达。解决方案：描述一般主题的简短替代文本，旁边（在图像周围的常规文本中，而不仅仅是在替代属性中）是重要数据的更详细描述，或者屏幕阅读器可以导航的等效数据表。