Highcharts SVG 可访问性答案

【问题标题】：Highcharts SVG accessibilityHighcharts SVG 可访问性
【发布时间】：2018-12-17 10:38:32
【问题描述】：

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

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

【问题讨论】：

希望这篇文章highcharts.com/docs/chart-concepts/accessibility对您有所帮助。
是的，看到了这篇文章。事实上，我们做了一些非常相似的事情，我们自己实现了，因为我们没有听说过这个选项，直到为时已晚。但这无济于事。 ARIA 属性不会复制到 SVG。它也不会创建标题，也不会让您操纵 desc。有时将表格留给屏幕阅读器是一个好主意（当只有几个数据点时），我们这样做了。但是，当可能有 30 多个数据点时，一个好的标题/描述像“上个季度股价上涨约 5%”之类的内容比让屏幕阅读器读出一堆数字要好得多
最终自己动手做。添加了一个加载事件函数，获取了我的标题并插入了 SVG，以及我的 aria 属性。

标签： highcharts accessibility

【解决方案1】：

以下是登陆此页面的用户的一些信息。从高图表版本 5 开始，支持可访问性。这是示例的链接 https://www.highcharts.com/docs/chart-concepts/accessibility

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

人们还可以通过 chart.description、series.description 和 point.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/

【讨论】：