Wai Aria - An Intro
Upcoming SlideShare
Loading in...5

Wai Aria - An Intro



Talk on WAI-ARIA from Multipack Presents in February

Talk on WAI-ARIA from Multipack Presents in February



Total Views
Views on SlideShare
Embed Views



7 Embeds 201

http://eclecticdreams.com 130
http://stg.eventdots.jp 27
http://lanyrd.com 26
http://www.slideshare.net 14
http://www.linkedin.com 2
https://lanyrd.com 1
https://twitter.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Wai Aria - An Intro Wai Aria - An Intro Presentation Transcript

  • 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/