Canvas元素无语义，需用aria-labelledby和aria-describedby关联外部文本，动态内容须实时更新描述并设aria-live；交互图表应混合DOM叠加实现键盘导航，测试须覆盖屏幕阅读器与键盘操作。
canvas 元素本身不支持 aria-label 或 alt 属性
直接给 <canvas> 加 aria-label、alt 或 title 是无效的——浏览器不会将其作为可访问文本读出，屏幕阅读器通常只报“graphics”或直接跳过。根本原因是 <canvas> 是一个无语义的绘图表面，不像 <img> 那样内置替代文本机制。
必须通过其他 HTML 结构显式提供等效文本信息：
- 用
aria-labelledby指向页面中已存在的可见标题元素（如<h3 id="chart-title">月度销售额</h3>），让屏幕阅读器把标题当作画布描述 - 用
aria-describedby指向一段详细说明（如<p id="chart-desc">柱状图显示 1–12 月销售额，最高为 8 月的 12.4 万元…</p>） - 确保被引用的 ID 确实存在且内容准确；ID 不能重复，也不能指向空元素
动态绘制图表时，替代文本必须同步更新
如果 canvas 内容靠 JavaScript 动态重绘（比如切换数据维度、缩放、高亮某项），光写死一个 aria-describedby 指向静态段落是不够的——辅助技术看不到 DOM 外部的状态变化。
正确做法是实时更新关联的描述元素内容，并触发适当的 ARIA live region：
立即学习“前端免费学习笔记（深入）”；
- 把描述容器设为
aria-live="polite"，例如：<p id="chart-desc" aria-live="polite"></p> - 每次重绘后，用 JS 修改该元素的
textContent，而不是 innerHTML（避免注入风险） - 不要仅依赖
aria-label动态设置在 canvas 上——多数屏幕阅读器不监听其变更 - 若描述较长或含结构化信息（如数据表格），考虑提供“详情展开”按钮，用
aria-expanded和aria-controls控制可访问性
复杂可视化需补充键盘导航与焦点管理
仅有替代文本还不够。当 canvas 表现交互式图表（如可点击柱形、拖拽折线、键盘切换数据点）时，用户无法用 Tab 键进入内部元素——因为 canvas 内部图形不是 DOM 节点。
可行方案是混合 DOM 与 canvas 渲染：
- 用 SVG 或原生 HTML 元素（如
<button>、<div role="region">）叠加在 canvas 上，覆盖关键交互区域 - 这些 DOM 元素需有明确
tabindex="0"、role和aria-label，并同步视觉位置（用绝对定位 + JS 计算坐标） - 禁用 canvas 默认聚焦（
tabindex="-1"），防止出现不可操作的焦点停顿 - 监听键盘事件（
ArrowLeft/Right、Enter）驱动数据点切换，并同步更新焦点和描述文本
测试是否真正可访问的两个硬指标
别只看代码有没有加 ARIA 属性。真实可用性取决于屏幕阅读器能否稳定读出、键盘能否完整操作：
- 用 NVDA + Firefox 或 VoiceOver + Safari，关闭图像，仅用键盘 Tab 导航，确认能进入图表区域、听到有意义的描述、执行关键操作（如查看某月数据）
- 运行 axe 或 WAVE 工具检查，但注意它们只能发现缺失
aria-labelledby这类基础问题，无法验证动态更新是否及时、描述是否准确匹配当前视图 - 最容易被忽略的是：当用户缩放页面或切换高对比模式时，叠加的 DOM 控件是否仍对齐 canvas 图形？坐标计算必须用相对单位或重绘时重新定位
