可访问图表替代说明

大理论

图表的可访问性不是给 canvas 加一个 aria-label 就结束。复杂图表通常需要短标题、正文解释、结构化数据表、可见标签、键盘可达交互、颜色以外的编码，以及在小屏和高缩放下仍然可读的布局。

小知识点

1. 标题写结论，不只写数据名；例如“退订率在三月后下降”比“退订率图表”更有用。
2. 简单图表可以用短 alt/aria-label；复杂图表需要邻近文本描述或数据表。
3. Canvas 图表默认对屏幕阅读器不可见，必须提供 role/aria/fallback 或外部替代表述。
4. 不要只靠颜色表达系列、状态或异常；用标签、形状、线型、纹理或直接标注冗余编码。
5. tooltip 不能只依赖 hover；键盘和触摸用户也要能获得数据点信息。
6. 数据表不是“下载 CSV”就足够，最好在页面内提供可导航的结构化替代或摘要。

设计判断

如果用户不看图也能从标题、说明和表格得到核心结论，并能追溯关键数字，图表替代是健康的；如果屏幕阅读器只能听到“chart”或“canvas”，就是不可用。

实现建议

为每个图表输出：caption/title、takeaway summary、source/updated time、accessible description、data table、series labels、unit/axis labels、color+shape encoding、keyboard tooltip path 和 responsive fallback。Chart.js/ECharts 这类 Canvas 图表尤其要检查 fallback 文本或邻近表格。

反例/风险

只有图例没有直接标注、红绿折线无形状差异、tooltip 只能 hover、移动端轴标签重叠、alt 写“dashboard chart”、数据源和更新时间缺失。

案例分析

W3C WAI 把图表和流程图归为复杂图像，指出复杂图像需要超过短句的说明。Chart.js 官方文档明确 Canvas 内容不会被屏幕阅读器理解，需要 ARIA 或 fallback 内容。USWDS 的 data visualizations 指南也把 usability 和 accessibility 作为互补目标。可学习点是：图表组件要同时交付视觉图和可访问数据路径。

来源链接

W3C WAI Complex Images: https://www.w3.org/WAI/tutorials/images/complex/ Chart.js Accessibility: https://www.chartjs.org/docs/latest/general/accessibility.html USWDS Data Visualizations: https://designsystem.digital.gov/components/data-visualizations/ WCAG Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html