Apache ECharts 中 ARIA 可访问性属性的优化实践

问题背景

在数据可视化领域，Apache ECharts 作为一款优秀的 JavaScript 图表库，其可访问性(Accessibility)支持一直备受关注。最新版本(5.5.0)中，当开发者启用 ARIA 功能时，系统会自动为图表容器添加 aria-label 属性，用于描述图表内容。

然而，当前实现存在一个潜在的可访问性问题：aria-label 属性被直接添加到了普通的 <div> 元素上，而没有配合适当的 ARIA role 属性。根据 WAI-ARIA 规范，这种做法可能会导致辅助技术(如屏幕阅读器)无法正确识别和处理这些可访问性信息。

技术分析

ARIA 规范要求

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)规范明确指出：

1. aria-label 应该用于可交互元素或具有语义角色的元素
2. 对于普通容器元素(如 <div>)，单独使用 aria-label 而不指定 role 属性是不符合最佳实践的
3. 图表类内容通常应该使用 role="img" 来表明其图像性质

当前实现的问题

ECharts 当前生成的 DOM 结构如下：

<div aria-label="图表描述内容...">
  <canvas></canvas>
</div>

这种结构存在两个问题：

1. 外层 <div> 没有明确的语义角色
2. 可访问性描述被放在容器上，而不是直接关联到实际渲染的图表元素

影响范围

虽然这个问题不会导致功能失效，但可能会：

1. 在某些辅助技术中无法正确识别图表内容
2. 在自动化可访问性测试工具(如 Lighthouse)中产生警告
3. 降低残障用户的使用体验

解决方案

推荐修改方案

最直接的解决方案是为包含 aria-label 的 <div> 添加 role="img" 属性：

<div role="img" aria-label="图表描述内容...">
  <canvas></canvas>
</div>

这种修改：

1. 符合 WAI-ARIA 规范中对图表类内容的角色定义
2. 保持现有功能的完整性
3. 不会引入额外的兼容性问题

替代方案分析

另一种可能的方案是将 aria-label 直接添加到 <canvas> 元素上。但这种方案存在以下问题：

1. Canvas 元素本身的可访问性支持有限
2. 可能与其他可访问性方案冲突
3. 不符合常见的实践模式

因此，为外层容器添加 role="img" 是最优解决方案。

实现建议

对于希望立即解决此问题的开发者，可以在初始化图表后手动添加角色属性：

const chart = echarts.init(document.getElementById('chart'));
chart.setOption(options);

// 手动添加role属性
document.getElementById('chart').setAttribute('role', 'img');

对于 ECharts 项目维护者，建议在源码中修改渲染逻辑，自动为启用了 ARIA 的图表容器添加 role="img" 属性。

总结

数据可视化产品的可访问性是一个重要但常被忽视的方面。Apache ECharts 作为主流图表库，持续改进其可访问性支持对推动整个领域的进步具有重要意义。本次发现的 ARIA 属性使用问题虽然看似微小，但对依赖辅助技术的用户却可能产生重大影响。通过简单的角色属性添加，即可显著提升产品的可访问性质量，值得在后续版本中优先修复。