- Sharon Rush – Knowbility.org
- Becky Gibson – IBM/Dojo accessibility
Sharon is basically going to “interview” Becky during this presentation.
Becky is showing off the ARIA example from the Secrets of Javascript Libraries presentation yesterday. ARIA stands for Accessible Rich Internet Applications. Long story short, ARIA is about assigning semantic roles to certain elements (specifically widgets—for example, you would assign a div that surrounds a file tree widget role=tree, then a tree item could be role=treeitem expanded=true, or selected=true). Dojo has ARIA integrated by default, and jQuery UI, YUI and Google tools are working on integrating ARIA as well.
Go here for the ARIA specifications: http://w3c/wai/pf
Becky is demoing this Dojo file tree example with the JAWS screen reader. Pretty awesome. JAWS tells you how many treeitems there are, when they are opened/closed, how many children there are, what is selected, etc. as you navigate the file tree with your keyboard’s arrow keys. Keyboard support is extremely important, even if you are not a screen reader user.
ARIA has a set of roles called “landmark roles” (eg – “headers”, “navigation”, “main content”, etc). Becky is demoing how JAWS reads these. Wow, in JAWS 10, you can bring up a Landmarks panel, and navigate to the various landmarks on the page with your arrow keys. This is a great way to get around the clunky “skip navigation” or “skip to content” links.
Check out the mark-up in Becky’s University of Illinois example for an idea of how to implement these landmark roles: http://test.cita.uiuc.edu/aria/nav/nav1.html
They are ripping on the Robert Wood Johnson Medical School’s tab accessibility (apparently, you have to tab through every single item in the subnavs before getting into the next main nav link). Ultra annoying. Becky recreated this site with Dojo for ARIA support, and it fixes the issue.
JAWS is really kind of annoying by the way—by default, it talks super fast, and is actually really difficult to understand (at least by my untrained ear). If you do anything with your keyboard, it interrupts itself and shouts what key you just pressed (eg – Welcome to the Career cen—TAB!—resumes and cover let—TAB!—etc). Seriously irritating, and for the amount of money that they charge for a JAWS license ($900[standard]–$1,100[pro]), they could have at least given JAWS some better and more realistic voices. Hell, Leopard ships with a speaking feature that has several voices that are way more natural and decipherable than this terrible JAWS default voice.
You can mark regions as live for content updated via AJAX, and JAWS will start reading that area as soon as it is loaded.
Now they are ripping on recovery.gov’s timeline because you can only browse it with a mouse. Becky recreated this using YUI’s carousel and ARIA to break the timeline into panels so that the timeline can be navigated with just the keyboard. JAWS is speaking the title of each of the buttons (eg – “Page 1 link, 1 of 5, click left arrow to go to the next panel”), which is kind of cool.
Man, Becky is all about Tree Controls—this is the fourth example she’s shown of the tree control’s ARIA accessibility. It makes her seem kind of like a one trick pony—all of the recreated examples were pretty weak with virtually no styles (eg – the aforementioned timeline looked like absolute hell, total 1995 styling)—but she seems to know quite a lot about ARIA and accessibility—which rules, so she doesn’t really need to be a bad ass developer I guess. However, they didn’t really talk about AJAX at all—save briefly touching on live regions—so I’m kind of confused about where the “AJAX” In the title “Accessible AJAX” came from. There is another dude (James Craig, who is part of the ARIA working group) sitting in the front row who keeps jumping into the conversation, and he is WAAAAAY more versed with accessibility and ARIA implementation from a developer’s perspective, so I kind of wish that he had been the presenter because he seems like a massive wealth of practical knowledge, and he was at both presentations that have dealt with ARIA anyway, soooo…
There is an ARIA attribute called hidden, which you can toggle as true or false for drop downs etc. Apparently, with live regions, you shouldn’t change the role of DOM elements on the fly. They suggest giving the live region div the live region role in the mark-up rather than changing it to a live region when you insert new html elements into said div.
When you mark a region as live, there are three different attributes that will govern the interruption of the screen reader reading the live regions (polite, assertive, rude [actually James just chimed in and said that rude is no longer in the spec, but assertive is basically what rude used to be, and now the third value is off]). Polite will wait until there is a pause in the info being read before interjecting the updated content, and assertive will interrupt the screen reader’s normal flow to interject the updated content. It is pretty obvious what off does.
Also, there is another property related to this called atomic. If atomic is true, the screen reader will read the entire element, but if atomic is false, the screen reader will only read the content that has changed.
I spoke with James Craig after the presentation about the potential redundancy of ARIA’s landmarks and HTML 5’s roles. He basically said that landmarks may be redundant in the case of HTML 5, but that also presupposes that whatever browser the user is employing supports HTML 5 (and thus recognizes the roles). He also told me that ARIA’s landmarks can be used in other mark-up languages such as XML, which is pretty rad. Cool guy, super nice, super knowledgeable.
Post a Comment