WAI-ARIA: Javascript Capability Testing?

Question

In the spirit of progressive enhancement, I'd like to do some ARIA capabilities testing to implement additional enhancements if they're supported by the browser. I'm not looking to detect screen readers—I'm looking to ensure that screen reader users will get the optimal experience given the tools that they're using.

For example, if the aria-live attribute is not supported, then it may not be a good idea to implement endless scrolling.

I'm aware that there's an additional concern that browsers may support these attributes but the screen reader may not. Since screen readers run transparently over browsers, I'm okay with that edge case being ignored.

I've never heard of anyone doing anything like this. Is it as easy as testing for additional DOM properties endowed by browsers? Do one of Mark Pilgrim's other capability testing techniques work here?

Thanks!

Pledget

To make sure I understand, you want JavaScript that will tell you if the aria-* attributes have any effect on the current browser? So if supporting browsers (conflating browsers and any accessibility plugins) consistently made sure that aria-selected had a value of true, false, or undefined as required by w3.org/WAI/PF/aria/states_and_properties#aria-selected then the JavaScript var div = document.createElement('DIV'); div.setProperty('aria-selected', 'bogus'); if (div.getProperty('aria-selected') != 'bogus') { alert('aria supported'); } would work? – Dolan

Correct! However, in many browsers you are able to set arbitrary attribute values on DOM elements. In the example you provided, (subbing get/setProperty for get/setAttribute), you get the alert in all browsers I tested, including FF1 and Safari 2( neither of which have any sort of ARIA support). I'm looking for something that will achieve that sort of result, however. – Catbird

Answer 1

The first answer has some incorrect information. Certain browsers do support WAI-ARIA and some don't. Browsers send events to screen readers via the operating system's accessibility API. If you use IE 7, for example, it cannot deal with WAI-ARIA where IE 8 can. Look at this graphic

That being said, you can't do testing to determine what tags are supported. In general, limited WAI-ARIA support began in FF2 and IE8. Look at the release notes of the browser to determine what WAI-ARIA support it has.

Here is a link that details testing WAI-ARIA

Lobell

Answer 2

I'm not looking to detect screen readers

I'm sorry, but that's exactly what you're looking to do. It is not possible to detect screen readers unless they expose themselves to content scripts in some way, and there are many different screen readers, so you shouldn't really try. If anything, you might be able to get some hack working in browsers that support aural CSS to detect screen readers, but you're definitely not going to be able to detect if a certain ARIA feature is supported or not.

if the aria-live attribute is not supported

No browsers actually "support" ARIA more than just providing element property accessors in the DOM; only screen readers/assistive reading software supports ARIA, in that it actually uses the ARIA attributes to help the user interact with a website.

Justitia

And going by the findings of the recent A List Apart article ARIA and Progressive Enhancement (possibly the provocation for this question?) the screen readers vary quite significantly. So screen reader sniffing is going to be the only way to do it. – Prognathous

Answer 3

As mentioned in @ChrisMorgan’s comment, Derek Featherstone’s A List Apart article on the difficulties of implementing ARIA gracefully is a must-read.

Alliaceous