Highcharts饼图图例无障碍问题：屏幕阅读器无法读取数值

方案一：自定义无障碍图例项格式化函数 #

直接使用accessibility.legend.itemFormatter替代lang.accessibility.legend.legendItem，这个函数能直接访问图例项对应的图表数据，确保数值正确注入：

Highcharts.chart('container', {
  accessibility: {
    legend: {
      itemFormatter: function (item) {
        // 直接通过item.point获取对应数据的数值，按需格式化精度
        return `${item.name} - ${item.point.y.toFixed(1)}`;
      }
    }
  },
  // 饼图基础配置示例
  series: [{
    type: 'pie',
    data: [
      ['U.S. Equity', 36.7],
      ['International Equity', 24.3],
      ['Bonds', 39.0]
    ]
  }]
});

方案二：修正语言模板的变量映射 #

如果坚持使用lang配置，部分Highcharts版本中{value}变量无法直接映射数据，可改用{point.y}替代模板变量：

lang: {
  accessibility: {
    legend: {
      legendItem: "{itemName} - {point.y}"
    }
  }
}

注意事项 #

• 优先选择方案一，itemFormatter提供了更灵活的自定义空间，能直接操控数据，避免模板变量的版本兼容性问题。
• 配置完成后，检查页面中生成的图例按钮元素，确认aria-label属性已包含完整的名称与数值文本。

内容的提问来源于stack exchange，提问作者pargat