文章目录

图表无障碍先做三件事:提供与图表对应的数据表;用线型、点形、纹理或文字补足颜色差异;在正文写出指标、时间范围和异常点。用UI 无障碍检查清单逐项检查后,再把这些状态放进同一份 Pixso 画布,设计师、研发和内容人员看到的结论才一致。

数据图表无障碍怎么做的核心关系与设计交付

先写读者要得到的结论

一张运营周报图不应让读者自己猜“本周是否达到目标”。先写指标名称、统计范围、数据截止时间和需要采取的动作,再决定图表和补充文字。趋势图旁的短摘要可以说明“第三周下降,低于目标线 4 个百分点”,但不要把摘要写成脱离数据的口号。

复杂图表至少准备两条读取路径:视觉用户看图形和图例,使用辅助技术或需要核对数值的人看数据表和文本结论。数据表应与图表使用同一单位、排序和时间范围,否则两种路径会给出不同答案。

把颜色改成多重编码

红绿两条线不能只靠色相区分。可以为每条线增加虚实、点形或直接标签;同一编码要贯穿图例、图形和正文,不要图例用虚线、图形又换成点划线。禁用或灰度显示时,关键关系仍应可辨认。

状态色也要加文字,例如“低于目标”“已完成”或“数据待更新”。纹理、线型和文字不是装饰,而是帮助读者确认类别的第二、第三条证据;颜色只负责增强层次。

数据表不是隐藏的备份

数据表的列标题写清指标和单位,行标题写清时间或类别,合计和缺失值保持一致。若数据太多,可先呈现与当前结论相关的区间,再给出可展开的完整表格,但不能只放一张无法复制的图片。

图表图片的 alt 只描述用途和结论,不把几百个数值塞进 alt。将关键发现写在 HTML 正文,并把完整数据表放在同一章节;这样搜索、键盘访问和后续交付都能找到文本。

在 Pixso 画布上做一次交付审查

为趋势图、数据表和结论摘要各建一块画板,检查单位、时间范围、颜色禁用、键盘阅读顺序和移动端裁切。把“看不到颜色时怎么办”“图表加载失败时怎么办”写成评审问题,而不是等研发联调时才发现。

把图例、文字摘要和表格的修改绑定到同一版本,避免设计稿更新了线型,说明文字还引用旧类别。最终交付应包含图表、可读文本、数据来源和检查记录。

交付时可以用三列检查:视觉编码、文本等价和操作路径。视觉编码看线型/点形/纹理是否一致;文本等价看摘要和数据表是否同口径;操作路径看键盘、放大和移动端是否仍能找到图例与结论。任一列缺失,都不要把图表标为“已完成”。

如果图表会随筛选条件变化,摘要、表格和 alt 的更新策略也要写清。初始状态显示什么、加载中如何告知、数据为空时给什么下一步,应该在设计稿里留出位置;不要用一个通用“暂无数据”覆盖所有原因。

复杂图表的文字替代和颜色使用边界,可对照W3C 非文本内容说明与颜色使用说明理解;本文将规范要求转译为设计交付检查。