More Live Notes from AtMedia2008 - Steve Faulkner - :WAI: ARIA - It's Easy!"

4:29p.m., Fri 30 May 2008

Steve is employed by The Paciello Group - a software accessibility consultancy

 

WAI - Web Accessibility Initiative
ARIA - Accessible Rich Internet Applications

Even though the acronyms are confusing - WAI - ARIA is simple.

What is it? It's a w3 specification, like html, cSS. Its vefy close to becoming a recommendation - we're at "last call" stage.

WHAT'S IT DO #1?
It makes sense out of noise adn out of silence.

Makes sense out of noise -
theres lots of info announced by screen readers, quite often, sp in the mdern web, a lot of that stuff isn't clear. The correct info doesn't always get to the screen reader user. Content updates i particular don't get announced.

What's it do?
For a visioned user, here's an OK button (no problem)
depending upon how it's coded, and quite often, what a screen reader will hear: "link graphic okay"

(screen reader users not always blind - incuded partially sighted, people with reading difficulties)

Following WAI-ARIA guidelines will result in the announcement:
"button okay, to activate press spacebar"

What's the diff?

<a href="http://www.blogger.com/post-edit.do" title="OK" role="button">

WAI-ARIA consists, generally speaking of a list of additional attributes to ad to existing HTML elements.

What's gained?

Correct ROLE info: "button"
Results in accurate instructions, e.g. "to activate press spacebar"

Screen Reader verbosity canbe customised (it could be set just to announce "button" and no "press spacebar to activate" every time)

WHAT'S IT DO? #2
Buttons With 2 States

<input src="btn-on.gif" alt="toggle something" aria-pressed="true" type="image" />
<input src="btn-ff.gif" alt="toggle something" aria-pressed="false" type="image" />

aria-pressed attributes *could* be applied to other elements, but it's recommednde that you use the core HTML functionality - for a start you get the built in browser functionality e.g. keyboard navigation.

AJAX & WAI-ARIA
(dynamic content updates)

2 main issues here:
- users not having access to content changes
- users not being aware that content has changed

This is generally an assistive technology issues - JAWS has solved the first part of the problem since version 7 (we're now on version 9)

looking at twitter as a good example of where you have dynamic content - type in the textfield and you get the number counting the number of characters available. A useful bit of functionality. However, screen readers get info in a linear way.
In order to read the number they have to manually move their virtual curso back in the document, then forward again to the textfield.

This is a good simple example - not a life or death issue - but it's a good example because we can extrapolate this example to other situations.

WHAT'S ARIA DO #3?

Live Regions:
A site author can specify areas of the DOM that are 'live', allowing screen readers to update users when the content has changed.

<span aria-live="polite">12</span>

The content of this span wil be read out when a user stops typing.

live region attribute values:

off, polite, assertive, rude

polite - changes announced after users have completed theur current activity.

assertive - the user agent should interrupt the user. but it may not do so immediately.

Instead of silence, what you have now, is that the user can access dynamic content without having to know that it's dynamic content - it's not a manual process to keep checking and trying to second-guess the system.

WAI-ARIA has taken it's lead from the way that OS accessibility has been built and applied thwe principles to the way the web has come to work. Web and SOftware Accessibility is merging. The standard is driving browser vendors and assistive technology vendors to dramatically improve their product. WAI-ARIA has created a buzz.

SUPPORT?

Support has been forthcoming.

Mozilla Firefox has full support for WAI-ARIA
JAWS has paritla support and is committed to increase support.
YAHOO! - as mentioned earlier, Christian Heilman has been building WAI-ARIA support into YUI. Window Eyes Zoo Text Internet Explorer 8 has WAI-ARIA support. Dojo jQuery UI is implementing WAI-ARIA support

we have all the major browsers, a lot of the major companies in the internet committed to WAI-ARIA.

HTML4 + ARIA = HTML more.

for web browsers that don't support ARIA, it doesn't break anything.

In regards to HTML5...

Some of the things in ARIA will have native support in HTML 5 - for e.g. the progress bar, there's guidelines to do this in HTML4, but increased semantics in TML5 will make this easier. There's still some gaps in the HTML5 spec that ARIA will fill. But who knows? It's an ongoing process.

HTML5 + ARIA still equals HTML more

ARIA RESOURCES

http://w3.org/wai/intro/aria

good article on Mozilla Developer site too - title HTML's relationship to ARIA.
http://developer.mozilla.org/en/docs/ARIA:_Accessible_Rich_Internet_Applications/Relationship_to_HTML_FAQ

FireVox - an add-on to Firebug.

 

Steve now turns to some demonstrations.

a demo of the twitter textbox and the character countdown.

technique1:
rather than announcing the number of characters left, the demo makes 'smashing glass noises' - a single smash when there's 30 chars left - 2 smashes when 15 chars left, 5 smases with 5 chars left. (This demo uses flash to make the sound.)

technique 2:
Another possibility (another demo) at a given amount the browser gives an alertbox - which interrupts the user and takes the focus away from the textarea - probably a less effective (or more specifically, a more clumsy, annoying method)

technique 3:
Another demo - announcing the number of characters left when the user pauses. This is the technique described earlier an works well. Plus - it's just using the simple ARIA markup rather than JS/flash.

Another demo:

Steve boots up JAWS.

it talks super-fast. this is slower than usual users would have it set- JAWs remember is something that you get used to and it's more useful set at a high speed.

He pulls up an example in Firefox of an slider mechanism.

Jaws, and other popualr screen reading software, has a number of different modes - a static text mode, a forms mode, a cursor mode, application mode. Generally speaking, when reading an html document the software will switch automatically between modes - i.e. it will switch to form mode when a form is reached.

Focus on the slider - it reads "aria left, right slider, one per cent, use left and right arrows to change the value by one"

This is a slider that is visually usable, usable via the keyboard and, using ARIA attributes, usable by screen readers.

ANOTHER EXAMPLE - A 3 STATE CHECKBOX

the chcekbox has three states, marked up as the following:

role="checkbox"
aria-checked="false"
aria-checked="mixed"
aria-checked="true"

HTML doesn't really supprt 3 state checkboxes, but you might do this using JS. If you were to do this, ARIA gives a way of making this accessible.

QUESTIONS:

QUESTION:
The question is about the sacrificing of HTML validity.

ANSWER:
the idea is that you'd add the attributes dynamically via unobtrusive JS. Obviously, the new HTML5 will make the need for some ARIA-specific attributes less obvious.

QUESTION:
adding new attributes via JS - doesn't this have a performance hit?

ANSWER:
I'm not really qualified to answer that - but it hasn;t been raised as a major issue, Nate? Can you answer that?

NATE KOECHLY (YUI):
Well, no, in our research it hasn't been a problem. There' is, obviously, a performance hit, but the pay-off makes it worth it.

QUESTION:
The author complexity - it's very complex - do screen readers handle errors?

ANSWER:
A lot of the JS libs are implementing this - that will be a big help to authors.
You don't have to test this stuff in a screen reader - there's a lot of tools being developed out there. The University of Illinois have developed an accessibility toolbar for FF. There's also the MSSA tool from Inspect32 which allows you to interrogate elements and see the affect of attributes you might add to your HTML code.
Of course, it could be a problem, if this stuff isn't applied correctly. The work that I do involves working a lot with companies that are developing web apps - not so much sites, but web-based applications which have complex interfaces. We as a company try and get companies to build these things as much as possible. WAI-ARIA doesn't replace the underlying semantics, it enhances those.
The companies we're working with, they WANT to make their apps conformant, in the past there just hasn't been a way to do that, but WAI-ARIA is that way.