canvas元素不支持aria-label或title属性，需用role="img"配合aria-labelledby指向外部文本提供可访问名称，并同步更新描述、支持键盘操作、避免依赖像素数据。
canvas 元素本身不支持 aria-label 或 title 属性
直接给 加 aria-label 或 title 是无效的——浏览器不会将其作为可访问名称暴露给屏幕阅读器。Canvas 是位图渲染容器，语义信息必须通过外部方式补充。
正确做法是用 role="img" 显式声明角色，并搭配 aria-labelledby 或 aria-label（仅当无独立文本节点时）：
<canvas id="chart" role="img" aria-labelledby="chart-title"></canvas><p id="chart-title">2024年Q1销售额趋势图，最高点为4月的¥287万</p>
-
role="img"告诉辅助技术这是一个图像类内容，触发图像语义处理逻辑 -
aria-labelledby指向外部文本元素，比aria-label更易维护、支持多语言和动态更新 - 避免只用
aria-label写长描述，它无法被用户暂停、复制或翻译
动态绘制内容必须同步更新无障碍描述
如果 canvas 内容随用户操作（如缩放、筛选）实时变化，对应的描述文本也得更新，否则屏幕阅读器会读出过期信息。
示例：切换数据维度后，更新 chart-title 的文本内容，并触发 aria-live 区域通知：
document.getElementById('chart-title').textContent = '按地区筛选：华东区占比42%，同比增长11%';
document.getElementById('chart-title').setAttribute('aria-live', 'polite');
- 修改
textContent后，需确保 DOM 已更新再触发aria-live，否则可能被忽略 - 优先用
aria-live="polite"，避免打断用户当前操作；仅在关键状态变更（如错误提示）用"assertive" - 不要依赖
canvas.toDataURL()生成描述——它输出的是像素数据，不是语义信息
提供键盘可操作的替代控制方式
纯鼠标绘图的 canvas 对键盘用户不可达，无障碍描述再完整也没用。必须让核心功能（如查看数据点、切换视图）能通过键盘触发。
- 为交互区域添加
tabindex="0"，并监听keydown（如 Enter/Space 触发操作） - 用
aria-describedby关联说明性文本，比如“按方向键移动焦点，Enter 查看详情” - 避免在 canvas 上直接绑定
focus事件——它默认不可聚焦，需配合tabindex才生效 - 若使用第三方图表库（如 Chart.js），检查其是否启用
plugins.accessibility并配置ariaLabelCallback
测试时别只依赖 Lighthouse 或 axe
自动化工具能发现 aria-label 缺失，但无法验证描述是否准确、是否与视觉内容一致、是否随交互实时更新。
- 手动用 NVDA + Firefox 或 VoiceOver + Safari 测试真实播报效果
- 关闭图形，只靠屏幕阅读器操作整个流程，确认所有关键数据都能被获取
- 特别注意坐标轴标签、图例、高亮数据点等动态元素——它们常被遗漏或描述模糊
最常被忽略的点：canvas 画布尺寸改变（如响应式重绘）后，关联的文本描述没重算，导致“宽度300px的柱状图”实际显示为600px，但描述仍说“窄柱形”。这类错位只能靠人工交叉核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
