去年我对 200 个数据仪表盘做了无障碍审计，结果令人警醒：94% 至少存在一项严重无障碍问题。
最常见的问题？仅用颜色编码。全球约 3 亿有色觉缺陷的人完全无法读懂这类图表。
我们来解决这个问题。
为什么图表无障碍很重要
除了伦理责任，还有商业考量：
- 全球约 15% 人口存在某种形式的障碍
- 色盲影响约 8% 男性和 0.5% 女性
- 无障碍设计往往能提升所有人的可用性
而且越来越多地成为法律要求。政府网站和许多企业必须符合 WCAG。
图表无障碍的四大支柱
1. 不依赖颜色
原则：绝不要只用颜色传达信息。
反面：折线图里「销售」用红、「利润」用绿，没有其他区分。
正面：同一张图，销售用实线、利润用虚线；或不同标记形状、或直接标文字。
可行做法：
- 为填充区域增加图案或纹理
- 使用不同线型（实线、虚线、点线）
- 在数据点上直接加标签
- 散点图用不同形状
- 图例清晰且不依赖颜色辨认
配色建议：
- 使用色盲安全调色板（如 ColorBrewer）
- 相邻颜色对比度足够
- 用色盲模拟工具测试（Chrome DevTools 内置）
2. 读屏器支持
图表本质是视觉的，要让读屏器用好需要刻意设计。
必备要素：
- 描述图表核心信息的替代文本，而不只是结构
- 以数据表作为替代呈现
- 图表周围正确的标题层级
- 交互元素有 ARIA 标签
写好替代文本：
反面：「一张显示销售数据的柱状图」
正面：「2025 年第三季度各区域销售柱状图。西部领先为 230 万美元，东部 180 万，中部 140 万，南部 90 万。」
替代文本要回答：看不见这张图的人最需要知道什么？
复杂图表应提供数据表替代。用 figure 包住图表并写清替代文本，并可用可折叠的 details 提供底层数据表。
3. 键盘导航
交互图表必须支持键盘访问。
要求：
- 所有交互元素可通过 Tab 到达
- 焦点指示清晰
- Tab 顺序合理
- 常用操作有键盘快捷键（并文档化）
复杂交互仪表盘：
- 提供跳过图表的方式
- 键盘用户能获得与鼠标用户相同的信息
- 提供暂停自动更新数据的方式
测试：拔掉鼠标，只用键盘操作你的图表，能否获取全部信息？
4. 认知无障碍
无障碍不只有感官障碍，认知负荷也很重要。
建议：
- 图表简单，一图一主旨
- 标签与注释避免行话
- 仪表盘内格式统一
- 提供背景与解释
- 避免自动播放动画
五秒测试：别人能在 5 秒内理解图表主旨吗？若不能，就简化。
常见图表类型及注意点
饼图
- 问题：仅靠颜色区分扇区
- 改进：加图案、在扇区上直接标标签或带数值的清晰图例
折线图
- 问题：多条线只靠颜色区分
- 改进：不同线型、直接标签或交互悬停状态
柱状图
- 问题：柱与背景对比不足
- 改进：至少 3:1 对比度，必要时给柱加边框
热力图
- 问题：仅靠颜色渐变对无视力者无意义
- 改进：格内标数值，并提供数据表替代
散点图
- 问题：点重叠、仅靠颜色区分类别
- 改进：不同标记形状、可调透明度、数据表
测试你的图表
自动化
- axe DevTools 做通用无障碍检测
- WAVE 做快速视觉检查
- Lighthouse 无障碍审计
手动
- 色盲模拟（Sim Daltonism、Chrome DevTools）
- 读屏器测试（NVDA、VoiceOver、JAWS）
- 仅用键盘操作
- 缩放到 200%（图表是否仍可用？）
用户测试
- 把残障用户纳入用研
- 不要假设，询问真实痛点
立即可做的小改进
- 为每张图加替代文本（描述洞察，而不只是类型）
- 提供数据表替代
- 检查颜色对比（图形至少 3:1）
- 用色盲模拟器测试
- 确认键盘导航可用
- 添加可见的焦点指示
有用工具
ChartGen 等现代工具开始默认提供无障碍能力，可关注：
- 内置替代文本建议
- 色盲安全配色
- 自动图案叠加
- 数据表生成
但工具不能替代人工，仍需根据场景审查和定制。
业务影响
一位无障碍顾问讲过：某金融服务公司修好了投资者仪表盘的无障碍问题后，所有用户的参与度提升了 23%，不限于残障用户。
无障碍设计往往就是更好的设计。
资源
- WCAG 2.1（尤其 1.4.1 颜色使用、1.1.1 非文本内容）
- Chartability 项目（图表专项指南）
- A11y Style Guide（组件模式）
- 色盲模拟工具
最后
你不会造一栋没有坡道的楼，为什么要做一个没有无障碍的仪表盘？
让图表可访问的成本不高，影响却很大。从一张图开始，应用这些原则，再逐步推广。
无障碍包容设计数据可视化WCAG色盲友好