Friday, November 20th, 2009
Todd Kloots is talking accessibility and ARIA, with examples showing how YUI nicely supports these techniques. He explains how to improve in three areas: perception, usability, discoverability.
Can We Do ARIA Today?
Firefox and IE (he didn’t say which version) have really good support for ARIA. And Opera, Chrome, and Safari. Likewise for the screenreaders – JAWS, Windows Eyes, NVDA – also have good support. An the libraries – YUI, Dojo, JQuery-UI – all have good support baked in, one of the benefits of using ARIA is automatic support.
Improving Perception – ARIA and Screenreaders
- node.setAttribute("role", "menu")
- node.role = "menu" // alternative introduced by IE8. IE-only, so don't use!
Improving Usability – Keyboard Focus, ARIA, and YUI support
Keyboard access. For some people, it’s a necessity, and for others it’s still an option or preference (think Vim). To support it, you must be able to tab to the element to get focus, so you should control tabbing with tabindex. A good application of controlling tabbing is, amazingly enough, moving through tabs. Another is modal dialogs; the browser doesn’t “know” it’s modal, so we have to control focus to make sure it doesn’t slip out of the thing that’s the only thing users should be able to click on!
Todd shows us just how many steps are required to perform a task in a complex application like Yahoo! mail, using just tabs to navigate through – 19 steps in this example, walking through the toolbar; and even more, when you consider the wider picture of entering the app in the first place. To help with this, he introduces a pattern whereby tabIndexes are updated dynamically to control what comes next, as you move through a toolbar. A negative tabIndex will ensure the element is skipped over.
Device-independence with markup was also advocated to further improve accessibility:
- <input role="menuitem" type="text/>
Improving Discoverability – ARIA
Essentially, this is about “random access” and keyboard shortcuts; jumping straight to areas in this page and activating them. The key ARIA feature here is “landmark roles” to identify particular points on the page. This is still something where users aren’t aware of the feature, and Todd points out it’s not surprising as most screen reader users are self-taught (just under 75% according to the study he showed). Also, not every user is a geek, and the same applies to screen-reader users.
Posted by Michael Mahemoff at 11:10 am