Highcharts SVG可访问性 [英] Highcharts SVG accessibility

问题描述

由Highcharts创建的SVG没有标题，没有有意义的desc，也没有ARIA属性，或者至少我找不到在API中进行设置的任何东西.遵循 http://www.sitepoint.com/tips-accessible-svg/上的提示a>当我设置 http://api.highcharts时，我希望能够设置SVG的标题.com/highcharts#title (或其他替代选项).对于desc，我想我肯定需要一个替代选择-字幕不适合该法案.如果设置标题，则应在svg标签上设置aria-labelledby ="title"属性.如果我设置标题和 desc，则应该使用aria-labelledby ="title desc"(显然并非所有的屏幕阅读器都与aria-describeby兼容).并且svg标记还应该具有role ="img"属性.

The SVG created by Highcharts has no title, no meaningful desc and no ARIA attributes, or at least I can't find anything in the API to set these. Following the tips at http://www.sitepoint.com/tips-accessible-svg/ I would like to be able to set the title of the SVG when I set http://api.highcharts.com/highcharts#title (or some alternative option). For desc I think I'd need an alternative option for sure - subtitle wouldn't fit the bill. If I set the title the attribute aria-labelledby="title" should be set on the svg tag. If I set title and desc it should be aria-labelledby="title desc" (apparently not all screen readers are compatible with aria-describedby). And the svg tag should also have a role="img" attribute.

由于这些问题，当前我们无法通过无障碍审查.

Currently we are failing an accessibility review due to these issues.

推荐答案

以下是某人登陆此页面的一些信息.从第5版高图表开始，就支持可访问性.这是样品的链接 https://www.highcharts.com/docs/chart-concepts/accessibility

Here is some info for someone landing to this page. From high charts version 5 onward there is support for accessibility. Here is the link with samples https://www.highcharts.com/docs/chart-concepts/accessibility

它支持键盘导航.它还在图表上方包括一个隐藏的HTML屏幕阅读器信息部分，其中包含有关图表结构和内容的详细信息.可以通过向上或向下箭头键将注意力集中在图表上，然后由屏幕阅读器读取.

It has support for keyboard navigation. It also include a hidden HTML screen reader information section above the chart with details about the chart structure and content. This can be read by screen readers after getting focus on the chart by up or down arrow keys.

还可以通过chart.description，series.description和point.description向屏幕阅读器提供其他信息，通过它们可以汇总图表.

One can also provide additional information to the screen reader via chart.description, series.description and point.description through which one can summarize the chart.

请参见此处的示例，该示例使用description属性对图表进行了总结.

See example here which summarizes the chart using the description property.

$.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
        }
    }]
});

});

支持破折号样式以提高可见度的示例

Example for support for dash style for better visibility http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle/

这篇关于Highcharts SVG可访问性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！