Accessibility in Web
Accessible web sites are becoming a standard in modern web. A lot of government institutions and socially responsible companies have website accessibility requirements in place.
Making HTML accessible is a relatively old topic. The possibilities are quite well implemented. There is a lot of material on the topic. Here are some articles:
- Introduction to Web Accessibility
- Web Accessibility Initiative
- Making Your Website Design Accessible
- Make WordPress Accessible
SVG and accessibility
We at amCharts use SVG for displaying charts. Unfortunately, SVG cannot be made as accessible as regular HTML simply because not all browsers support simple tabindex tag on SVG elements, yet. The tabindex attribute specifies the order at which an element is selected when user hits TAB key. Vision-impaired people use it quite a lot to navigate the web pages by jumping from one element to the other – more often than not, mouse is not an option.
The standard is there and hopefully all browsers will implement the support soon. Here’s a list of the browsers that support tabindex on SVG elements at the moment. To sum up, at the moment of this writing only Chrome, Safari and Opera do it well, FF and IE – not yet.
WAI-ARIA
WAI stands for Web Accessibility Initiative and ARIA is Accessible Rich Internet Applications Suite. It defines a way to make Web content (especially dynamic, made with AJAX, JavaScript etc) more accessible to people with disabilities. The main idea is simple – they introduced new attributes, such as aria-label, aria-button or role which are understood by screen readers and also allows users to navigate through page not only by pressing tab key but using other keys in the keyboard (sometimes this only works when you use browser together with screen reader). Again, not all browsers and readers support WAI-ARIA tags at the moment, however as WAI-ARIA 1.0 was published as a completed W3C Recommendation, eventually all browsers and readers will support it.
Making charts accessible
One of the most simple solution to make charts accessible would be to add a table of the same data to the page. While being sort of low hanging fruit, this is a quite outdated and awkward approach – why should I clutter my web page with stuff that only 0.1% visitors will use?
By utilizing tabindex + WAI ARIA tags you can do so much more, making charts usable for everyone, while at the same time not cluttering your interface and not inflating amount of information that needs to be downloaded.
For this reason we added accessibleLabel property to a lot of classes of our charts. These tags are added to most elements automatically if accessible property of a chart is set to true (enabled by default). This means that even if you don’t do anything, the chart will be partly accessible – if user rolls-over the element of a chart and his screen reader supports ARIA tags, it will read the text. A big step forward would be setting tabIndex property on the elements you wish your users could set focus by pressing TAB key.
To do this, you should think of which elements of the chart are most important. A possibility to set focus on chart elements not only allows users to navigate through the items of the chart (and hear the information if he uses screen reader), but also perform other actions, like show/hide graph or slice by pressing Enter/Return key when a focus is set on the legend or zoom out chart by focusing on the zoom out button and pressing Enter/Return key, or even zooming to a specific position of the serial chart by focusing on scrollbar grips and adjusting selection with cursor keys.
Accessible pie chart
To illustrate all this we will build a simple pie chart and make it accessible:
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"valueField": "litres",
"titleField": "country",
"titles": [{
"text": "This is chart title",
"tabIndex": 1
}],
"tabIndex": 2,
"startDuration": 1,
"theme": "light",
"legend": {
"tabIndex": 3,
"accessibleLabel": "press Enter to hide or show [[title]]",
"align": "center"
},
"innerRadius": "30%",
"dataProvider": [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}]
});
Title of a chart has tabIndex set to 1, this means that this item will be focused first (if there are no other elements with tabIndex 0) when user presses tab key. If a person uses screen reader, it will read the chart title.
Next, we set tabIndex for the whole chart to 2. This means that pressing tab again will result focus to be set on chart slices, one by one. As default value of accessibleLabel property of pie chart is [[title]]: [[percents]]% [[value]] [[description]], the screen reader will read focused slice’s title, percent value, absolute value and description. You can modify accesibleLabel value by removing some tags or adding just a regular text if you want to.
Our legend has tabIndex set to 3. This means that after all slices are tabbed-through, the focus will move to the legend entries. Our legend has a possibility to show/hide slices (or graphs if it’s serial/xy chart). This can also be done by pressing Enter/Return while focused on the legend entry. That’s why we set value of accessibleLabel of a legend to: press Enter to hide or show [[title]]
You can use the same approach for most elements of our charts. Check documentation to see what default values of accessibleLabel are. Also, if a class has tabIndex property it means that this element can be focused and in some cases more actions can be made while focused. The only exception is zoom-out button of Serial/XY chart, the property is called zoomOutButtonTabIndex.
We are constantly working to improve accessibility on our charts. If you have experience in this area and would like to help us with suggestions or testing our charts, let us know – we will be glad to use your knowledge.
Accessible map
Another demo uses our JavaScript Map tool:
window.map = AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "light",
"projection": "miller",
"dataProvider": {
"map": "worldLow",
"areas": [{
"id": "AU",
"tabIndex": 3
}, {
"id": "BR",
"tabIndex": 1
}, {
"id": "CN",
"tabIndex": 2
}]
},
"areasSettings": {
"autoZoom": true,
"selectedColor": "#CC0000",
"accessibleLabel": "press Enter to zoom to [[title]]"
}
});
We have a map with three clickable countries – Australia, Brazil and China. We added tabIndex to each country object – 1 for Brazil, 2 for China and 3 for Australia. Now, if user presses tab, the focus will fall on these countries in exactly this order. We also added accessibleLabel to areasSettings with value press Enter to zoom to [[title]] – now, when user will set focus or hover on the area, screen reader will read this text (replacing [[title]] with actual title of the country). As autoZoom is set to true in the areasSettings, these countries are clickable. And as tabIndex is set, pressing Enter while focusing on a country will result zoom-in to it.
Availability
Accessibility features are available across all amCharts products starting from version 3.20.4.