图表无障碍设计，需要让用户在不能分辨颜色、不能看图或无法使用鼠标悬浮时，仍能理解结论、读取数值并完成操作。可以从同一份数据同时设计三条阅读路径：带非颜色标记的图形、说明主要变化的文字、可以逐项查询的数据表。
设计时把这三部分放在一起。可以用墨刀设计整理图表、摘要和数据表的呈现，先确认信息是否等价，再把焦点、语义和筛选联动规则交给研发实现。设计稿能表达要求，是否真正适用于辅助技术，要在运行中的界面验证。
先确定用户要从图里回答什么
假设运营人员要比较第一季度三种咨询渠道的完成量，判断哪些渠道增长、哪些下降，并查看各月数值。下面的数据专为本教程自拟，单位为“次”，统计的是已完成咨询次数，不是独立用户人数，也不用于证明某种渠道效果。
| 月份 | 在线咨询 | 电话咨询 | 现场咨询 |
|---|---|---|---|
| 1月 | 120 | 80 | 50 |
| 2月 | 160 | 80 | 40 |
| 3月 | 150 | 90 | 30 |
这张图要回答的是数量随月份怎样变化，因此可采用三条折线，横轴为月份、纵轴为完成量。若任务变成“比较季度总量”，条形图可能更直接。无障碍设计从图形是否适合任务开始，不能靠最后加一段alt弥补不必要的复杂结构。
给图写一个独立可理解的标题：“第一季度各渠道咨询完成量”。单位、时间范围和指标定义放在可见位置。不要只写“运营趋势”，再要求用户通过颜色、周围卡片或悬浮气泡猜出含义。
颜色之外，再给系列一种稳定的识别方式
用红、绿、蓝区分三条线，在某些视觉条件下可能很难辨认。更稳妥的做法是在颜色之外使用线型、节点形状和文字标签。本文可约定：
- 在线咨询：实线加圆形节点；末端直接标注“在线咨询 150”。
- 电话咨询：虚线加方形节点；末端标注“电话咨询 90”。
- 现场咨询：点线加三角节点；末端标注“现场咨询 30”。
图例也要显示相同线型与形状，不能图里有形状、图例却只剩三块颜色。若线条交叠，末端标签应避免覆盖，必要时用引导线或将图拆成共享刻度的小图。不要为了容纳越来越多系列，持续缩小文字与节点。
W3C关于颜色使用的说明要求颜色不能成为传递信息的唯一视觉手段。线型和标签是本例选择的实现方式，不是唯一合格方式。颜色本身仍然有价值，但“换成色盲友好配色”不能独自解决图例、文本和操作问题。
将设计稿转成灰度查看，可以帮助发现只靠色相识别的地方；它只是快速检查，不等于模拟所有色觉差异。还应检查浅色线条、网格与背景之间是否清晰，文字对比是否达到项目采用的要求。文字与非文本图形的适用条件不同，不要拿同一个比值覆盖全部元素。
短描述说明这是什么，摘要说明它告诉了什么
静态图的短替代文本可以写：“第一季度三种咨询渠道完成量折线图；趋势说明和各月数据见下方。”它识别了图表，也告知详细信息的位置。没有必要把九个数字和所有坐标轴刻度一口气塞进alt，让人每次遇到图片都听完整段。
放在图旁的可见摘要则承担解释任务。例如：
在线咨询三个月均为最多，1月为120次，2月升至160次，3月回落至150次；3月仍比1月多30次。电话咨询由80次增至90次，现场咨询由50次降至30次。数据只描述咨询量变化，不能据此认定在线渠道吸收了现场渠道的用户。
这段话保留了中间月份的峰值，避免把在线咨询说成“持续增长”；也区分了数量变化和原因解释。若关键结论来自特定阈值、置信区间或异常注释，它们也属于需要传达的信息，不能只把数据抄进表格就算完成。
W3C的复杂图片教程将简短识别信息与详细文本说明配合使用。详细说明可以包含关系、趋势和数据表，并让所有读者都能访问。本例把摘要和表放在图后，减少寻找成本。
数据表应保留关系，不能只是图片旁的附件
表头应明确月份、渠道和单位，行标题与列标题要在实现中建立关系。当前九个数很少，直接展示完整表格更方便；不必为了页面整洁，把唯一精确数值入口藏在不明显的图标里。
实现时可用语义化的 table、caption 和带 scope 的表头，让读屏用户能知道某个数字对应哪一月、哪个渠道。若使用可展开的“查看数据表”，触发控件应有明确名称和展开状态，键盘可达；展开后的内容顺序也要合理。
不要把整个数据表都塞进一个 aria-describedby 指向的节点，再假定读屏会按表格结构朗读。W3C提醒，这种描述可能被当作连续文本，表格和标题结构不一定保留。更稳妥的是让表格以自身语义出现在可访问的阅读顺序中，必要时提供可定位到它的链接。
零值与缺失值同样要区分。如果某个月未采集现场咨询数据，图上不应自动画成0，表中应写“未采集”，摘要也不能推断当月没有咨询。导出的文件要保留这种区别，否则用户离开网页后又会读到另一套结论。
悬浮提示提供便利，也要有稳定的替代入口
鼠标悬浮可以快速显示“2月，在线咨询，160次”，但触屏用户没有持续悬浮，键盘用户也可能无法选中数据点。本例的基础任务是查询数值，常驻数据表已经提供另一条读取路径；图表仍应有清楚名称和说明。
如果数据点还支持打开咨询明细，问题就多了一层：读取数值和执行下钻是两种任务。表格中也应提供对应的明细入口，或者为图表实现明确的键盘交互。不能只说“数字在表里”，却把主要业务操作留给鼠标用户。
设计说明写清焦点顺序、进入和退出方式，以及当前项怎样反馈。如果使用方向键在点间移动，需要与研发确定实际交互模型并在目标浏览器、读屏软件中测试；不要在设计稿上画一个焦点边框就标记“支持键盘”。对于只有九个数的简单场景，提供清晰表格通常比增加复杂自定义导航更容易使用。
当数据点需要继续打开下一层时，还应设计图表下钻的层级、筛选与返回路径，让图形和数据表的入口抵达相同范围。
筛选后，图、摘要和表必须是同一个范围
假设用户取消“现场咨询”，图只剩在线和电话两条线。此时摘要不能继续写“三种渠道”，表格也应按约定显示当前两种渠道，或明确告知它仍是全部数据。两种方案都可以讨论，但不能让页面暗示它们代表同一个范围。
推荐在图上方明确显示“当前范围：1—3月，在线咨询、电话咨询”。筛选控件有可读名称与选中状态；变化后用适当的状态反馈告知数据已更新，避免无必要地把焦点跳到页面顶部。若请求失败，保留旧图时要标明旧范围和未更新状态，不能把新筛选标题配到旧数据上。
交给研发时，将图形、摘要、表格和导出统一到同一份筛选结果与数据版本。隐藏系列是仅影响视觉，还是改变比较范围，也要写进规则。否则视力正常的用户看到两条线，读屏用户听到三条线，双方会基于不同内容讨论同一个页面。
用具体阅读任务验收
先请评审者在不依赖颜色的情况下说出三条系列名称，再通过摘要回答“在线咨询是否每月都增长”。正确答案应是没有：2月160次，3月150次。只读表格时，则应能找到“2月电话咨询80次”。这些任务对应同一数据，不是泛泛地评价画面是否清楚。
随后用键盘完成筛选、查看数据表和打开可用明细；在目标读屏环境中确认图名、表头关系、筛选状态与更新反馈。最后改变一个数据或取消一个渠道，检查图、摘要和表有没有同步变化。原型阶段可以检查设计是否写全这些规则，运行阶段才能确认它们真的工作。
若正在规划整个运营页面，可继续阅读可视化大屏原型设计流程；更多页面视觉方法可在设计专题中查找。对这一张图，交付完成的标志是不同阅读与操作方式都能获得同样的关键信息，而不是只换好一套配色。
