wai aria - an intro
DESCRIPTION
Talk on WAI-ARIA from Multipack Presents in FebruaryTRANSCRIPT
![Page 1: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/1.jpg)
WAI ARIA IntroMatt Machell
Multipack Feb 09
eclecticdreams.com
![Page 2: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/2.jpg)
Accessible Rich
Internet Applications
![Page 3: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/3.jpg)
The Problem• Web applications do funky things
with Javascript
• How do assistive technologies cope with that funkiness?
![Page 4: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/4.jpg)
Extra semantics for defining web applications for assistive technologies
The Solution
![Page 5: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/5.jpg)
Desktop does this already
(Microsoft Active Accessibility, Apple Accessibility for Cocoa and so on)
![Page 6: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/6.jpg)
ARIA is in draft
but, is already supported
![Page 7: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/7.jpg)
Essentially...Roles - Tell the AT what something does
States / Properties - Attributes of that something which change value
Tabindex - Improvements for navigation
![Page 8: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/8.jpg)
More attributesto learn!
![Page 9: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/9.jpg)
Roles as Landmarks <div id="content" role="main" >
<form id="search" role="search">
<div id="footer" role="contentinfo">
Hit ; in Jaws 10 to move to next landmark
![Page 10: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/10.jpg)
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...
![Page 11: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/11.jpg)
Roles for the Page
<body role="application">
<body role="document">
![Page 12: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/12.jpg)
States & Properties
aria-valuenow
aria-valuemin
aria-valuemax
aria-checked
![Page 13: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/13.jpg)
Example : A volume widget <div id="a">Volume</div>
<div id="b">Adjust the volume of the output.</div>
<div id="volume-control">
<span role="slider" aria-valuenow="5" aria-valuemin="0" aria-valuemax="11" tabindex="0" aria-labelledby="a" aria-describedby="b" ></span>
</div>
![Page 14: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/14.jpg)
Connecting Things
aria-labelledby
aria-describedby
aria-flowto
aria-owns
![Page 15: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/15.jpg)
Captions!
<img src="photo.jpg" alt=""
aria-describedby="pic1">
<p role="description" id="pic1">Lemmy</p>
![Page 16: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/16.jpg)
Previously for tabbing to anchor or form elements:
Tabindex
![Page 17: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/17.jpg)
Tabindex - Revised!
no tabindex - default behaviour
tabindex="0" - Document order
tabindex="-1" - focus-able via javascript
tabindex="1" - in order before tabindex="0"
![Page 18: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/18.jpg)
For Widgets• Give them a tabindex
• Manage keyboard control within the widget
• Set up relationships
• Update states
![Page 19: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/19.jpg)
Some of this requires complicated Javascript
to manage
![Page 20: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/20.jpg)
Live Regions
Alerting assistive technology to page changes
![Page 21: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/21.jpg)
aria-live (off, polite, assertive, rude)
aria-atomic (true, false)
aria-relevant (additions, removals, text)
![Page 22: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/22.jpg)
<div id="task-list" aria-live="polite"aria-relevant="additions" >
<p>Write slides!!!</p>
</div>
Example : Pending Tasks
![Page 23: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/23.jpg)
• Set ARIA attributes in markup
• XHTML Module, so won't validate if it’s HTML
• you can inject them via Javascript
How?
![Page 24: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/24.jpg)
Support?
Not yet implemented everywhere.
![Page 25: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/25.jpg)
Browsers:
Opera 9.5+, Firefox 1.5+, IE 8
Webkit is working on it
![Page 26: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/26.jpg)
Assistive Technologies:
Jaws 7.1+, Windows Eyes 5.5+,
NVDA, Firevox
(each differs, JAWS 10 pretty good)
![Page 27: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/27.jpg)
Good News
• Screenreader users update regularly (74% update within a year according to WebAIM research)
![Page 28: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/28.jpg)
Bad News
• Inconsistent implementations
• Not quite finalised
• Lots of testing to do
![Page 29: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/29.jpg)
HTML 5 or ARIA? <div role="contentinfo">
or
<footer>
or
<footer role="contentinfo">?
![Page 30: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/30.jpg)
IE 8 Implementation Oddities
element.setAttribute("aria-valuenow", "50");
(only works in true standards mode - strict doctype)
All IE modes can use (non-standard): element.ariaValuenow = '50'
Fixed!
![Page 31: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/31.jpg)
Good Resources
• Codetalks Wiki - wiki.codetalks.org
• Gez Lemon's tutorial - dev.opera.com/articles/view/introduction-to-wai-aria/
![Page 32: Wai Aria - An Intro](https://reader034.vdocuments.mx/reader034/viewer/2022042521/554b9e8fb4c905ae618b4821/html5/thumbnails/32.jpg)
And of Course
• ARIA Primer - www.w3.org/TR/wai-aria-primer/
• ARIA Best Practices - www.w3.org/TR/wai-aria-practices/