如何使用屏幕阅读器 (NVDA) 读取 highcharts 中的数据答案

【问题标题】：How to read data in highcharts using screenreaders (NVDA)如何使用屏幕阅读器 (NVDA) 读取 highcharts 中的数据
【发布时间】：2022-08-04 19:18:14
【问题描述】：

我正在使用 NVDA 来检查 highcharts 的可访问性，并且屏幕阅读器不会读取 highcharts 中的内容。我无法使用制表键或箭头键转到下一个值并阅读屏幕。我尝试包含 highcharts 的accessibility.js 模块。

我试过的示例代码：

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\">
</script>
<script src=\"https://code.highcharts.com/highcharts.js\"></script>
<script src=\"https://code.highcharts.com/modules/accessibility.js\"></script>
</head>

<body>
  <div id=\"container\" style=\"width: 550px; height: 400px; margin: 0 auto\"></div>
  <script language=\"JavaScript\">
    $(document).ready(function() {
      var chart = {
        type: \'column\'
      };
      var title = {
        text: \'Monthly Average Rainfall\'
      };
      var subtitle = {
        text: \'Source: WorldClimate.com\'
      };
      var xAxis = {
        categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\', \'Jul\',
          \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\'
        ],
        crosshair: true
      };
      var yAxis = {
        min: 0,
        title: {
          text: \'Rainfall (mm)\'
        }
      };
      var tooltip = {
        headerFormat: \'<span style = \"font-size:10px\">{point.key}</span><table>\',
        pointFormat: \'<tr><td style = \"color:{series.color};padding:0\">{series.name}: </td>\' +
          \'<td style = \"padding:0\"><b>{point.y:.1f} mm</b></td></tr>\',
        footerFormat: \'</table>\',
        shared: true,
        useHTML: true
      };
      var plotOptions = {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      };
      var credits = {
        enabled: false
      };
      var series = [{
          name: \'Tokyo\',
          data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
            148.5, 216.4, 194.1, 95.6, 54.4
          ]
        },
        {
          name: \'New York\',
          data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3,
            91.2, 83.5, 106.6, 92.3
          ]
        },
        {
          name: \'London\',
          data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6,
            52.4, 65.2, 59.3, 51.2
          ]
        },
        {
          name: \'Berlin\',
          data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4,
            47.6, 39.1, 46.8, 51.1
          ]
        }
      ];

      var json = {};
      json.chart = chart;
      json.title = title;
      json.subtitle = subtitle;
      json.tooltip = tooltip;
      json.xAxis = xAxis;
      json.yAxis = yAxis;
      json.series = series;
      json.plotOptions = plotOptions;
      json.credits = credits;
      $(\'#container\').highcharts(json);

    });
  </script>

在柱状图上使用 tab 键时，NVDA 只读取有关高图的详细信息，然后读取第一列。无法导航到其他列，如果我再次按下选项卡，控件将转到图例部分。

您能在此处以代码 sn-p 的形式提供minimal reproducible example 吗？
即使您设法使屏幕阅读器可以访问图表，我相信最好的做法是提供表格和图表。在任何情况下，图表中的注释都类似于表格中的注释。
您能否编辑您的问题以将示例代码集成为代码 sn-p？
是的，肯定会这样做
@Andy 在柱状图上使用制表键时，NVDA 只读取有关高图的详细信息，然后读取第一列。无法导航到其他列，如果我再次按下选项卡，控件将转到图例部分。

标签： highcharts accessibility screen-readers jaws-screen-reader nvda

【解决方案1】：

其实没关系，Highcharts 似乎有很好的可访问性支持。好的选择！

问题是对键盘导航的误解。

根据Aria Practices’ Keyboard Navigation Inside Components：

[…] 选项卡序列应仅包含复合 UI 组件的一个可聚焦元素。一旦组合包含焦点，Tab 和 Shift + Tab 以外的键使用户能够在其可聚焦元素之间移动焦点。

这些键除了标签通常是方向键，这正是 Highcharts 正在做的事情。

在您的示例中，您可以通过左右键切换月份，并通过向上和向下箭头键在一个月内切换。有可访问的名称和区域，因此屏幕阅读器应该很好地宣布数据。

有关更多详细信息，另请参阅Highcharts for Accessibility

【讨论】：