Wai Aria - An Intro

WAI ARIA Intro Matt Machell Multipack Feb 09 eclecticdreams.com

Accessible Rich Internet Applications

The Problem • Web applications do funky things with Javascript • How do assistive technologies cope with that funkiness?

The Solution Extra semantics for defining web applications for assistive technologies

Desktop does this already (Microsoft Active Accessibility, Apple Accessibility for Cocoa and so on)

ARIA is in draft but, is already supported

Essentially... Roles - Tell the AT what something does States / Properties - Attributes of that something which change value Tabindex - Improvements for navigation

More attributes to learn!

Roles as Landmarks <div id=quot;contentquot; role=quot;mainquot; > <form id=quot;searchquot; role=quot;searchquot;> <div id=quot;footerquot; role=quot;contentinfoquot;> Hit ; in Jaws 10 to move to next landmark

Roles for Context There are roles for the GUI widgets found in desktops applications, but not in HTML. trees, grids, timers, dialogs, toolbars, menus, groups, and so on...

Roles for the Page <body role=quot;applicationquot;> <body role=quot;documentquot;>

States & Properties aria-valuenow aria-valuemin aria-valuemax aria-checked

Example : A volume widget <div id=quot;aquot;>Volume</div> <div id=quot;bquot;>Adjust the volume of the output.</div> <div id=quot;volume-controlquot;> <span role=quot;sliderquot; aria-valuenow=quot;5quot; aria-valuemin=quot;0quot; aria-valuemax=quot;11quot; tabindex=quot;0quot; aria-labelledby=quot;aquot; aria-describedby=quot;bquot; ></span> </div>

Connecting Things aria-labelledby aria-describedby aria-flowto aria-owns

Captions! <img src=quot;photo.jpgquot; alt=quot;quot; aria-describedby=quot;pic1quot;> <p role=quot;descriptionquot; id=quot;pic1quot;>Lemmy</p>

Tabindex Previously for tabbing to anchor or form elements:

Tabindex - Revised! no tabindex - default behaviour tabindex=quot;0quot; - Document order tabindex=quot;-1quot; - focus-able via javascript tabindex=quot;1quot; - in order before tabindex=quot;0quot;

For Widgets • Give them a tabindex • Manage keyboard control within the widget • Set up relationships • Update states

Some of this requires complicated Javascript to manage

Live Regions Alerting assistive technology to page changes

aria-live (off, polite, assertive, rude) aria-atomic (true, false) aria-relevant (additions, removals, text)

Example : Pending Tasks <div id=quot;task-listquot; aria-live=quot;politequot; aria-relevant=quot;additionsquot; > <p>Write slides!!!</p> </div>

How? • Set ARIA attributes in markup • XHTML Module, so won't validate if it’s HTML • you can inject them via Javascript

Support? Not yet implemented everywhere.

Browsers: Opera 9.5+, Firefox 1.5+, IE 8 Webkit is working on it

Assistive Technologies: Jaws 7.1+, Windows Eyes 5.5+, NVDA, Firevox (each differs, JAWS 10 pretty good)

Good News • Screenreader users update regularly (74% update within a year according to WebAIM research)

Bad News • Inconsistent implementations • Not quite finalised • Lots of testing to do

HTML 5 or ARIA? <div role=quot;contentinfoquot;> or <footer> or <footer role=quot;contentinfoquot;>?

IE 8 Implementation Oddities element.setAttribute(quot;aria- valuenowquot;, quot;50quot;); Fixed! (only works in true standards mode - strict doctype) All IE modes can use (non-standard): element.ariaValuenow = '50'

Good Resources • Codetalks Wiki - wiki.codetalks.org • Gez Lemon's tutorial - dev.opera.com/articles/view/ introduction-to-wai-aria/

And of Course • ARIA Primer - www.w3.org/TR/wai- aria-primer/ • ARIA Best Practices - www.w3.org/ TR/wai-aria-practices/

http://eclecticdreams.com	115
http://lanyrd.com	24
http://www.slideshare.net	14
https://lanyrd.com	1

Wai Aria - An Intro

by Matt Machell

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 154

Statistics

Wai Aria - An Intro Presentation Transcript