Manipulating WAI-ARIA calls in Google Visualization API controls

Question

Is there any way to add more WAI-ARIA elements to Google Charts controls?

Here's the issue specifically: I'm designing a page with Google Charts widgets for a government website so it must be accessible using WCAG 2.0 standards.

The page is simple: a few category filters applied to a simple data array to create a data view and present the view in a table chart. Screen readers seem to navigate the controls and table fine, and the screen reader seems to grok that the table is updating dynamically.

However, selecting an item in a dropdown doesn't alert the screen reader that the content of the table has changed. This is a necessary feature. It could be handled easily, in theory, by adding aria-live="polite" to the div in which the control is identified.

Unfortunately, the div in which the control is identified is inside the div composed by the Google Charts API, and if I try to add anything it gets overwritten.

For example, let's say I create a category filter, and the raw HTML looks like this:

<div id="CatFilterName" class"cssname" aria-live="polite">

After Google has its way, the HTML the browser sees this:

<div id="CatFilterName" class"cssname" style="position: relative;">
<div class="google-visualization-controls-categoryfilter">
<div class="charts-inline-block charts-menu-button" aria-expanded="false" role="button" tabindex="0" aria-haspopup="true" style="-webkit-user-select: none;">
...</div></div></div>

There are several ARIA elements Google implements here but none of them announce to the screen reader when a control has been used, and the one I added has been erased. These controls are placed on the page in a layout table; I can add ARIA states and properties higher up, to higher-level divs and tds and whatnot, but nothing I try seems to work.

Can anyone suggest some workarounds?

asgallant asgallant · Accepted Answer · 2014-06-12T21:15:02

If you can identify which element in the control needs the aria-live="polite" attribute, you can set that in a "ready" event handler for the control:

google.visualization.events.addListener(control, 'ready', function () {
    // set aria attributes here
});

Whenever the control draws or redraws, the event handler will fire and the attributes will be set. Just make sure to add the event handler after creating the control but before drawing it.

Manipulating WAI-ARIA calls in Google Visualization API controls

1 Answers