直接加alt不够用，因其仅为静态快照，无法响应交互式图表的悬停、点击、缩放等动态状态变更；必须结合ARIA实时区域或动态更新aria-describedby来同步变化内容。
为什么直接加 alt 不够用？
单纯给 <img alt="交互式HTML图表的数据可视化可访问性方案" > 或 <canvas></canvas> 加 alt 属性，只适用于静态、一眼能概括的图表（比如“2023年Q1-Q4销售额柱状图”）。但交互式图表会动态变化：悬停显示数值、点击切换数据维度、缩放坐标轴、展开子图——这些状态变更，alt 无法响应。屏幕阅读器读完初始 alt 后，后续交互产生的新信息（如“当前高亮：华东区，销售额 287 万”）完全丢失。
-
alt 是一次性快照，不是活的数据通道
- 所有动态内容必须通过 ARIA 实时区域（
aria-live）或显式更新 aria-describedby 的目标元素来同步
- 如果图表用
<canvas></canvas> 渲染（如 Chart.js 默认），它本身不包含语义结构，alt 更是唯一但失效的入口
如何让 SVG 图表真正可访问？
SVG 元素天然支持 DOM 操作和 ARIA，是交互式图表做可访问性的首选载体。关键不是“画出来”，而是“说出来”。
- 给每个可交互图形（如
<rect></rect>、<circle></circle>）加上 role="graphics-symbol" 和 aria-label，例如：<rect ... aria-label="Q2 销售额：150万元，同比增长12%">
- 使用
aria-labelledby 关联标题，aria-describedby 关联详细趋势描述（放在隐藏但可读的 <p class="sr-only"></p> 中）
- 鼠标悬停/键盘聚焦时，必须同步更新
aria-live="polite" 区域的内容，不能只改颜色或 tooltip 文本
- 避免仅靠
title 属性提供提示——它不被所有屏幕阅读器可靠读出，且无键盘触发机制
Chart.js 等库怎么补无障碍短板？
Chart.js 默认输出 <canvas></canvas>，语义为零。它不自动生成 ARIA 标签，也不响应焦点或键盘操作。
- 初始化时手动启用
plugins.accessibility（v4+ 支持），但该插件仅覆盖基础场景（如图表标题、图例朗读），不处理数据点级交互
- 必须配合额外代码：监听
onHover 和 onClick 回调，把当前高亮数据写入一个 <div aria-live="polite"> 容器 <li>图例项需转为真实 <code><button></button> 或带 tabindex="0" 的元素，并绑定 aria-pressed 表示激活状态
- 若用
options.plugins.legend.display = false 隐藏图例，请确保等效的文本描述已通过 aria-describedby 提供，否则图例信息彻底消失
哪些“看起来很完善”的方案实际无效？
有些做法看似合规，实则绕过辅助技术核心路径。
- 把完整数据表格放在图表下方但用
display: none 隐藏：屏幕阅读器可能跳过，且无法与当前视图联动
- 仅提供“下载 CSV”链接：这不是替代内容，而是推卸责任——用户需要的是当前所见即所得的等效理解，不是自己解析文件
- 用 CSS
transform: scale() 放大图表解决低视力需求：会模糊文字、破坏坐标轴精度，且不改变逻辑尺寸，对缩放型辅助工具无效
- 声称“已通过 axe 或 WAVE 扫描”：这些工具只能检测静态 ARIA 属性是否存在，测不出交互状态是否同步、描述是否准确、焦点管理是否合理
真正难的不是加几个属性，而是把每次鼠标移入、键盘 tab、数据筛选，都当成一次内容广播事件来设计。可访问性在交互式图表里，从来不是附加功能，而是渲染逻辑的一部分。
alt 是一次性快照，不是活的数据通道 aria-live）或显式更新 aria-describedby 的目标元素来同步 <canvas></canvas> 渲染（如 Chart.js 默认），它本身不包含语义结构，alt 更是唯一但失效的入口 - 给每个可交互图形（如
<rect></rect>、<circle></circle>）加上role="graphics-symbol"和aria-label，例如：<rect ... aria-label="Q2 销售额：150万元，同比增长12%"> - 使用
aria-labelledby关联标题，aria-describedby关联详细趋势描述（放在隐藏但可读的<p class="sr-only"></p>中） - 鼠标悬停/键盘聚焦时，必须同步更新
aria-live="polite"区域的内容，不能只改颜色或 tooltip 文本 - 避免仅靠
title属性提供提示——它不被所有屏幕阅读器可靠读出，且无键盘触发机制
Chart.js 等库怎么补无障碍短板？
Chart.js 默认输出 <canvas></canvas>，语义为零。它不自动生成 ARIA 标签，也不响应焦点或键盘操作。
- 初始化时手动启用
plugins.accessibility（v4+ 支持），但该插件仅覆盖基础场景（如图表标题、图例朗读），不处理数据点级交互
- 必须配合额外代码：监听
onHover 和 onClick 回调，把当前高亮数据写入一个 <div aria-live="polite"> 容器 <li>图例项需转为真实 <code><button></button> 或带 tabindex="0" 的元素，并绑定 aria-pressed 表示激活状态
- 若用
options.plugins.legend.display = false 隐藏图例，请确保等效的文本描述已通过 aria-describedby 提供，否则图例信息彻底消失
哪些“看起来很完善”的方案实际无效？
有些做法看似合规，实则绕过辅助技术核心路径。
- 把完整数据表格放在图表下方但用
display: none 隐藏：屏幕阅读器可能跳过，且无法与当前视图联动
- 仅提供“下载 CSV”链接：这不是替代内容，而是推卸责任——用户需要的是当前所见即所得的等效理解，不是自己解析文件
- 用 CSS
transform: scale() 放大图表解决低视力需求：会模糊文字、破坏坐标轴精度，且不改变逻辑尺寸，对缩放型辅助工具无效
- 声称“已通过 axe 或 WAVE 扫描”：这些工具只能检测静态 ARIA 属性是否存在，测不出交互状态是否同步、描述是否准确、焦点管理是否合理
真正难的不是加几个属性，而是把每次鼠标移入、键盘 tab、数据筛选，都当成一次内容广播事件来设计。可访问性在交互式图表里，从来不是附加功能，而是渲染逻辑的一部分。
plugins.accessibility（v4+ 支持），但该插件仅覆盖基础场景（如图表标题、图例朗读），不处理数据点级交互 onHover 和 onClick 回调，把当前高亮数据写入一个 <div aria-live="polite"> 容器 <li>图例项需转为真实 <code><button></button> 或带 tabindex="0" 的元素，并绑定 aria-pressed 表示激活状态 options.plugins.legend.display = false 隐藏图例，请确保等效的文本描述已通过 aria-describedby 提供，否则图例信息彻底消失 哪些“看起来很完善”的方案实际无效？
有些做法看似合规，实则绕过辅助技术核心路径。
- 把完整数据表格放在图表下方但用
display: none 隐藏：屏幕阅读器可能跳过，且无法与当前视图联动
- 仅提供“下载 CSV”链接：这不是替代内容，而是推卸责任——用户需要的是当前所见即所得的等效理解，不是自己解析文件
- 用 CSS
transform: scale() 放大图表解决低视力需求：会模糊文字、破坏坐标轴精度，且不改变逻辑尺寸，对缩放型辅助工具无效
- 声称“已通过 axe 或 WAVE 扫描”：这些工具只能检测静态 ARIA 属性是否存在，测不出交互状态是否同步、描述是否准确、焦点管理是否合理
display: none 隐藏：屏幕阅读器可能跳过，且无法与当前视图联动 transform: scale() 放大图表解决低视力需求：会模糊文字、破坏坐标轴精度，且不改变逻辑尺寸，对缩放型辅助工具无效 真正难的不是加几个属性，而是把每次鼠标移入、键盘 tab、数据筛选，都当成一次内容广播事件来设计。可访问性在交互式图表里，从来不是附加功能，而是渲染逻辑的一部分。
