Steve Faulkner – Making Twitter Tweet

More notes from Accessibility 2.0

Twitter – good example of web 2.0 and potential problems for assistive technology (AT). Focussing today on JavaScript/Ajax – ensure these user interfaces are usable in AT. Also use of microformats by Twitter, particularly <abbr> for dates – not the best way to encode machine-readable data.

Provide correct role + state info for interface elements. Eg. Link as button = incorrect role. Button image with descriptive alt text = incorrect state description. Solution, use a button instead of a link. Use alt on the image to describe the state of the button, not what it looks like.

Dynamic content – make updated content available to AT and notify AT that new content is available. Be aware of how the virtual buffer works in JAWS<7.1 and Window Eyes. There is a 600ms delay on virtual buffer updates after buttons are pressed, which can be a problem if Ajax updates return in > 600ms - the virtual buffer updates before the DOM is changed and everything goes wonky. JAWS 7.1+ has fixed this, but still an issue in Window Eyes. Providing alternative routes to update content can help here. Also WAI-ARIA live regions – not sure about support here.

Write “Content updates occur frequently. If things aren’t working as you expect, try refreshing the page.” and hide this off the page. Crude but effective.

Live region example – interactive word count on a textarea. Gives a sound alert when 30, 15 and 5 characters remaining. Control over type of alert – text vs. sound – should come from user, I suppose.

WAI-ARIA – a mechanism for adding Name, Role and State to existing HTML elements. Politeness level – polite|assertive|rude – tells AT when/how frequently to read changing info back to user.

Implementation/support – Firefox, IE8, Opera, JAWS, Window-Eyes, ORCA, NVDA, Firevox. YUI Libraries, Dojo and Spry support ARIA. Also Google tools.