Post on 08-May-2015
description
WAI ARIA IntroMatt 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?
Extra semantics for defining web applications for assistive technologies
The Solution
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 attributesto learn!
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
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="application">
<body role="document">
States & Properties
aria-valuenow
aria-valuemin
aria-valuemax
aria-checked
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>
Connecting Things
aria-labelledby
aria-describedby
aria-flowto
aria-owns
Captions!
<img src="photo.jpg" alt=""
aria-describedby="pic1">
<p role="description" id="pic1">Lemmy</p>
Previously for tabbing to anchor or form elements:
Tabindex
Tabindex - Revised!
no tabindex - default behaviour
tabindex="0" - Document order
tabindex="-1" - focus-able via javascript
tabindex="1" - in order before tabindex="0"
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)
<div id="task-list" aria-live="polite"aria-relevant="additions" >
<p>Write slides!!!</p>
</div>
Example : Pending Tasks
• Set ARIA attributes in markup
• XHTML Module, so won't validate if it’s HTML
• you can inject them via Javascript
How?
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="contentinfo">
or
<footer>
or
<footer role="contentinfo">?
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!
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/