WAI-ARIA – It’s Easy
Web Accessibility Initative – Accessible Rich Internet Applications
It’s a W3C spec, close to becoming a recommendatio, aims to make sense out of NOISE, out of silence.
Wherever possible, use the native tags to convey role and state – where you can’t, use the new WAI-ARIA attributes to add extra meaning – this way, the keyboard operability is built in.
Role and state information can be applied to virtually any HTML element. For instance, the extra code for a button/graphic might be:
<a href=”” title=”OK” role=”button”><img src=”ok.gif” /></a>
The extra attribute, role=”button” is the thing which tells assistive technologies more information – the role of the element is a button, and the standard usage instructions fed to the user would be “to activate, press spacebar”.
Of course, the same thing could be achieved with an image button, but WAI-ARIA can still add extra useful information:
Button off-state:
<input type=”image” src=”okoff.gif” alt=”highlight off” role=”button” aria-pressed=”false” />
and for the on-state:
<input type=”image” src=”okon.gif” alt=”highlight off” role=”button” aria-pressed=”true” />
AJAX and WAI-ARIA
It can help in the following situations – when
- Users not having access to content changes
- Users not being aware of content changes
Eg Twitter’s letters left indicator – when you’re typing in the box, screen reader users don’t know the numbers are changing (they are in virtual cursor mode for text input).
Live Region attribute addresses this problem – pause during typing, and the letters left is announced by the screen readers. The relevent attribute is aria-live, properties are “off, polite, assertive or rude”. So they gain access to content changes.
Support
Major browser vendors, yahoo, google, Jaws, etc. You can start using them now, they won’t break agnostic browsers, it will be ignored.
FireVox is a plugin for FF – you can test it with that?
Attributes can be added by unobtrusive Javascript. But if you put them in now, they might not validate.
Firefox Accessibility Extension – useful for testing without a screenreader. Knows about WAI-ARIA attributes and will indicate state changes etc.
ARIA: Accessible Rich Internet Applications/Relationship to HTML FAQ
