Friday, November 20th, 2009

Full Frontal ’09: Todd Kloots on ARIA and Acessibility

Category: Accessibility, HTML, Usability

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

Websites can have problems in perception when rendered with a screenreader; it’s hard to get the big picture about what the words refer to. With ARIA, we can close the gap in perception. This is another example of progressive enhancement – augment the item by adding properties, markup or Javascript if required:


  1. node.setAttribute("role", "menu")
  2. 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.

You can also use the “focus” pseudoclass to ensure focus appearance is consistent for all elements. But, and it’s a big one, it’s not very well supported; even IE8 doesn’t support :focus on <a>, for example. Doing it manually with Javascript has problems, in particular performance. Fortunately, PPK has worked out how to handle focus and blur with event delegation, so that it’s much more performant, and the resulting technique is built into YUI3.

Device-independence with markup was also advocated to further improve accessibility:

  1. <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

3.4 rating from 23 votes


Comments feed TrackBack URI

I think it is also about semantic for acessibility enhancing tools. And its even easier to tag roles with jQuery (just pseudo code)

$(“#” + this).attr(‘role’,this);

And thats just one feature of ARIA. You can define AJAX/Live regions where u define the real interesting areas when content changes and save screenreaders and even more important the listeners a lot of time. ;)

It does not have influence on layout or can destroy anything. A browser that does not support ARIA, will just ignore it.

One only sad thing is, that even the new designed W3C Validator does not have roles or aria tags. Seems that validation of ARIA enriched HTML documents with the standard DTDs is still not that easy.

Comment by gabel — November 20, 2009

For those who couldn’t make it to Brighton, Todd’s talk on YUI 3 and accessibility from YUICONF 2009 is here:

Comment by miraglia — November 20, 2009

Leave a comment

You must be logged in to post a comment.