非文本内容

要求内容

非文本内容——图像、图标、图表、动画、CAPTCHA、音频嵌入、感官体验——必须附有传达相同信息或功能的文本替代内容。文本替代是辅助技术在用户无法感知原始内容时所呈现的内容。

WCAG 划分的四个类别：

• 信息性图像需要描述其所传达信息的 alt 文本。
• 功能性图像（链接、按钮）需要描述操作的 alt 文本，而非视觉外观。
• 装饰性图像使用空 alt（alt=""），使屏幕阅读器跳过它们。
• 复杂图像（图表、示意图）需要简短的 alt 文本，并在附近正文、<details> 块或通过 aria-describedby 提供更长的描述。

如何满足

• 为每个 <img> 添加 alt 属性。装饰性图像用空值，信息性图像用描述性文字。
• 通过 aria-label、可见文本或 SVG <title>，为每个仅含图标的 <button> 提供可访问名称。
• 对于图表和信息图，编写一句话摘要 alt 文本，并在图形前后紧邻位置以可访问表格呈现数据。
• 对于 CAPTCHA，提供至少一种非视觉替代方案（音频 CAPTCHA、邮件验证、服务器端限速）。
• 对于传递信息的音频（播客预览、界面提示音），提供等效文本。

常见失败

• alt="image" 或 alt="picture of a person" — 描述了媒介本身，而非内容。
• 仅含图标的按钮没有可访问名称（<button><svg /></button>）。屏幕阅读器只会宣读”按钮”，别无其他。
• 装饰性图像缺少 alt="" — 屏幕阅读器会退而读取文件名。
• 图表 <img> 标签的 alt 只写了图表标题，而页面上找不到底层数据。
• 带有意义的 CSS 背景图像，在标记中没有文本标签。

重要性

这是屏幕阅读器无障碍的基础。一个未能满足成功准则 1.1.1 的网站，对盲人用户而言几乎无法使用——每张图像都成为死胡同。这也是 axe 和 Lighthouse 最常检测到的失败项，因为自动化工具可以标记缺少 alt 的情况，但无法判断已有的 alt 是否有意义。