图像无障碍 - 编写 Alt 文本与理解对比度标准

为什么图像无障碍很重要

全球约有 2.85 亿视力障碍人士依赖屏幕阅读器等辅助技术浏览 Web。当图像缺少适当的替代文本时，这些用户将完全无法理解图像传达的信息。这不仅是道德问题，在许多国家和地区也是法律要求。

图像无障碍的影响范围远超视力障碍用户：网络连接慢时图像无法加载的用户依赖 alt 文本了解内容；搜索引擎通过 alt 文本理解图像内容（SEO 价值）；使用文本浏览器或阅读模式的用户需要文本替代。

WCAG（Web Content Accessibility Guidelines）2.1 的成功标准 1.1.1 要求：所有非文本内容都必须提供等效的文本替代。这是 A 级（最低级别）要求，意味着这是无障碍合规的基本门槛。

常见的无障碍问题：完全缺少 alt 属性（屏幕阅读器会读出文件名）、所有图像使用相同的通用 alt 文本（如"图片"）、alt 文本过长或包含无关信息、装饰性图像未正确标记为装饰性。

Alt 文本基础与编写模式

alt 文本应该传达图像的功能和含义，而非描述图像的视觉外观。核心问题是："如果这张图像无法显示，用户需要知道什么？"

基本规则：

• 简洁明了：通常 125 个字符以内。屏幕阅读器会一次性读出整个 alt 文本
• 不要以"图片"或"照片"开头：屏幕阅读器已经会告知用户这是一张图像
• 传达目的而非外观：描述图像在上下文中的作用
• 包含关键信息：如果图像中的文字是重要内容，将其包含在 alt 文本中

不同类型图像的 alt 文本模式：

• 信息性图像：描述图像传达的信息。例如公司 Logo：alt="PicLab 公司标志"
• 功能性图像（链接/按钮中的图像）：描述操作而非图像。例如搜索图标按钮：alt="搜索"
• 图表/数据可视化：总结关键数据点。例如：alt="2024 年销售趋势图，Q3 增长 45%"
• 复杂图像：使用简短 alt + 详细的 longdesc 或相邻文本说明

根据上下文优化 Alt 文本

同一张图像在不同上下文中可能需要不同的 alt 文本。关键是考虑图像在当前页面中的作用。

产品页面中的产品图片：描述产品的关键视觉特征。alt="红色皮革手提包，金色五金配件，尺寸 30x25cm"。帮助无法看到图片的用户了解产品外观。

教程中的截图：描述截图展示的操作步骤。alt="Photoshop 图层面板，显示已选中的背景图层和混合模式下拉菜单"。让用户能跟随教程操作。

文章中的装饰性配图：如果图像仅为视觉美化，不传达额外信息，使用空 alt：alt=""。屏幕阅读器会跳过这些图像。

信息图和流程图：提供简短摘要作为 alt，完整内容以文本形式呈现在页面上或通过 aria-describedby 关联详细描述。

避免的做法：不要在 alt 中堆砌 SEO 关键词；不要描述与上下文无关的视觉细节；不要对所有图像使用相同模板。

图像对比度与 WCAG 标准

WCAG 对图像中的文本和重要视觉元素有明确的对比度要求。

图像中的文本：如果图像包含文字（如横幅、信息图），文字与背景的对比度必须满足 WCAG AA 标准（普通文本 4.5:1，大文本 3:1）。这与页面上的 HTML 文本要求相同。

有意义的图形元素：WCAG 2.1 的 1.4.11 标准要求非文本内容（图标、图表线条、表单控件边框等）与相邻颜色的对比度至少为 3:1。例如折线图的线条必须与背景有足够对比。

图标和控件：交互式图标（如关闭按钮、导航箭头）需要满足 3:1 对比度。纯装饰性图标不受此限制。

检测工具：Colour Contrast Analyser（CCA）可以检测图像中任意两点的对比度；axe DevTools 自动检测页面上的对比度问题；Figma 的 Stark 插件在设计阶段验证。

常见问题：浅色文字叠加在照片上（背景不均匀导致部分区域对比度不足）- 解决方案是添加半透明遮罩层；图标在暗色模式下对比度不足 - 需要为暗色模式准备不同颜色的版本。

装饰性图像和背景图像的正确处理

并非所有图像都需要 alt 文本。正确识别和处理装饰性图像同样重要。

装饰性图像的判断标准：如果移除图像后页面的信息和功能不受影响，则该图像是装饰性的。例如：纯视觉分隔线、背景纹理、文章配图（当文章文本已完整传达信息时）。

处理方式：

• HTML <img>：设置 alt=""（空字符串，非省略 alt 属性）。屏幕阅读器会完全跳过
• 添加 role="presentation" 或 aria-hidden="true" 作为额外保障
• CSS 背景图像：天然对屏幕阅读器不可见，无需额外处理。适合纯装饰性图像

常见错误：

• 省略 alt 属性（<img src="...">）：屏幕阅读器会读出文件名，造成干扰
• 对装饰性图像写 alt 文本：增加不必要的噪音，降低屏幕阅读器用户的浏览效率
• 将有意义的图像设为装饰性：导致信息丢失

背景图像的无障碍：如果 CSS 背景图像传达了重要信息（如状态指示器），需要通过其他方式提供等效文本（如 aria-label 或隐藏的文本元素）。

アクセシビリティの実践書は Amazon でも探せます

自动化测试与持续改进

图像无障碍不是一次性工作，需要建立持续的检测和改进机制。

自动化工具：

• axe-core：可集成到 CI/CD 流水线中，自动检测缺少 alt 属性的图像、空 alt 用于非装饰性图像等问题
• Lighthouse 无障碍审计：Chrome DevTools 内置，提供无障碍评分和具体改进建议
• Pa11y：命令行无障碍测试工具，支持批量页面扫描
• eslint-plugin-jsx-a11y：在开发阶段就捕获 React 组件中的无障碍问题

自动化的局限性：工具只能检测"是否存在 alt 文本"，无法判断 alt 文本的质量和准确性。人工审查仍然不可替代。建议定期进行人工无障碍审计，特别是对新增内容。

持续改进流程：

1. 在 CI 中集成自动化无障碍测试，阻止不合规的代码合并
2. 建立 alt 文本编写指南和模板，降低团队成员的学习成本
3. 定期使用屏幕阅读器（VoiceOver、NVDA）实际体验网站
4. 收集残障用户的反馈，了解实际使用中的痛点
5. 跟踪 WCAG 标准更新，及时调整合规策略