Highcharts SVG可访问性

Question

Highcharts创建的SVG没有标题，没有有意义的描述和ARIA属性，至少我在API中找不到任何设置这些属性的内容。遵循http://www.sitepoint.com/tips-accessible-svg/上的提示，当我设置http://api.highcharts.com/highcharts#title（或某个替代选项）时，我希望能够设置SVG的标题。对于描述，我认为我肯定需要另一种选择 - 副标题不适合此用途。如果我设置标题，则应在svg标记上设置aria-labelledby =“title”属性。如果我设置标题和描述，它应该是aria-labelledby =“title desc”（显然，并非所有屏幕阅读器都兼容aria-describedby）。而且，svg标记还应具有role =“img”属性。

目前，由于这些问题，我们未通过无障碍性审核。

- Joshua Hewitt

---

希望这篇文章 http://www.highcharts.com/docs/chart-concepts/accessibility 会对你有所帮助。 - Sebastian Bochan

是的，看到了这篇文章。实际上我们做了类似的事情，因为在得知这个选项之前我们自己实现了它。但这并没有帮助。ARIA属性不会被复制到SVG上。也不会创建标题，也不能让您操作desc。有时将表格留给屏幕阅读器是一个好主意（当只有少量数据点时），我们也这样做。但当可能有30多个数据点时，一个良好的标题/描述，比如“股票在上个季度上涨了约5%”，比让屏幕阅读器读出一堆数字要好得多。 - Joshua Hewitt

最终我自己手动完成了它。添加了一个加载事件函数，获取了我的标题并将其与我的ARIA属性一起插入到SVG中。 - Joshua Hewitt

Answer 1

这里有一些信息适用于来到这个页面的人。 从 Highcharts 版本 5 开始，支持无障碍功能。 这是带有示例的链接 https://www.highcharts.com/docs/chart-concepts/accessibility

它支持键盘导航。 它还在图表上方包括一个隐藏的 HTML 屏幕阅读器信息部分，其中包含有关图表结构和内容的详细信息。 在通过上箭头或下箭头键聚焦于图表后，屏幕阅读器可以读取此内容。

您还可以通过 chart.description、series.description 和 point.description 提供其他信息给屏幕阅读器，通过这些方式可以总结图表。

请参见此处的示例，其中使用 description 属性总结图表。

$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {
Highcharts.stockChart('container', {
    chart: {
        description: 'Chart shows Apple stock prices from mid 2008 to mid 2015. It shows steady growth with one significant peak lasting through most of 2012 before normalizing.'
    },

    title: {
        text: 'Apple Stock Price 2008 to 2015'
    },

    subtitle: {
        text: 'Accessible stock chart demo'
    },

    rangeSelector: {
        selected: 1
    },

    navigator: {
        series: {
            description: 'Overview series for navigation' // The navigator series could be confusing to screen reader users.
        }
    },

    series: [{
        name: 'AAPL',
        data: data,
        tooltip: {
            valueDecimals: 2
        }
    }]
});

});

http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/accessibility/accessible-stock/

支持虚线样式以提高可见性的示例 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle/

- Sarath