Highcharts SVG 可访问性

Question

Highcharts 创建的 SVG 没有标题，没有有意义的 desc 和 ARIA 属性，或者至少我在 API 中找不到任何东西来设置这些。遵循 http://www.sitepoint.com/tips-accessible-svg/ 的提示我希望能够在设置 http://api.highcharts.com/highcharts#title 时设置 SVG 的标题(或一些替代选项)。对于 desc，我想我肯定需要一个替代选项 - 副标题不符合要求。如果我设置标题，属性 aria-labelledby="title"应该设置在 svg 标签上。如果我设置 title 和 desc，它应该是 aria-labelledby="title desc"(显然不是所有的屏幕阅读器都与 aria-describeby 兼容)。并且 svg 标签也应该有一个 role="img"属性。

目前，由于这些问题，我们未能通过可访问性审查。

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/