在 Google 图表上设置 aria-label 的自定义值

Question

我正在使用 Google Chart 的 javascript 库来构建一些图表，我想提高它们的可访问性。我的图表目前正在使用 ARIA 标签属性呈现，如下所示：

<svg width="500" height="500" aria-label="A chart." style="overflow: hidden;">

这是一种默认值。我想知道是否有人知道如何通过图表配置为该属性设置自定义值。

Answer 1

没有用于设置图表元素属性的配置选项。
但您可以手动更改图表 'ready' 事件的属性...

// set attribute
google.visualization.events.addListener(chart, 'ready', function () {
  var svg = chart.getContainer().getElementsByTagName('svg');
  if (svg.length > 0) {
    svg[0].setAttribute('aria-label', 'CUSTOM LABEL');
  }
});

请参阅以下工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');

  for (var i = 0; i <= 100; i++) {
    data.addRow([i, ((2 * i) + (((i % 2) === 0) ? i * 2 : i * -2))]);
  }

  var options = {
    chartArea: {
      left: 64,
      top: 48,
      right: 32,
      bottom: 48,
      height: '100%',
      width: '100%'
    },
    height: '100%',
    legend: {
      alignment: 'start',
      position: 'top'
    },
    width: '100%'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  // set attribute
  google.visualization.events.addListener(chart, 'ready', function () {
    var svg = chart.getContainer().getElementsByTagName('svg');
    if (svg.length > 0) {
      svg[0].setAttribute('aria-label', 'CUSTOM LABEL');
      console.log(svg[0].outerHTML.substring(0, svg[0].outerHTML.indexOf('>') + 1));
    }
  });

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

在 Google 图表上设置 aria-label 的自定义值

Set the custom value of the aria-label on a Google chart

javascript

charts

accessibility

google-visualization

web-accessibility