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 funkin...
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 val...
More attributes
   to learn!
Roles as Landmarks
<div id=quot;contentquot; role=quot;mainquot; >
<form id=quot;searchquot; role=quot;searchquot;>
<div i...
Roles for Context
There are roles for the GUI widgets
found in desktops applications, but
not in HTML.


trees, grids, tim...
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...
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=qu...
Tabindex

Previously for tabbing to anchor or
form elements:
Tabindex - Revised!
no tabindex - default behaviour
tabindex=quot;0quot; - Document order
tabindex=quot;-1quot; - focus-ab...
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>W...
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...
Good Resources

• Codetalks Wiki - wiki.codetalks.org
• Gez Lemon's tutorial -
  dev.opera.com/articles/view/
  introducti...
And of Course

• ARIA Primer - www.w3.org/TR/wai-
  aria-primer/
• ARIA Best Practices - www.w3.org/
  TR/wai-aria-practic...
Upcoming SlideShare
Loading in …5
×

Wai Aria - An Intro

7,291 views
7,137 views

Published on

Talk on WAI-ARIA from Multipack Presents in February

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,291
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
57
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Wai Aria - An Intro

  1. 1. WAI ARIA Intro Matt Machell Multipack Feb 09 eclecticdreams.com
  2. 2. Accessible Rich Internet Applications
  3. 3. The Problem • Web applications do funky things with Javascript • How do assistive technologies cope with that funkiness?
  4. 4. The Solution Extra semantics for defining web applications for assistive technologies
  5. 5. Desktop does this already (Microsoft Active Accessibility, Apple Accessibility for Cocoa and so on)
  6. 6. ARIA is in draft but, is already supported
  7. 7. Essentially... Roles - Tell the AT what something does States / Properties - Attributes of that something which change value Tabindex - Improvements for navigation
  8. 8. More attributes to learn!
  9. 9. 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
  10. 10. 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...
  11. 11. Roles for the Page <body role=quot;applicationquot;> <body role=quot;documentquot;>
  12. 12. States & Properties aria-valuenow aria-valuemin aria-valuemax aria-checked
  13. 13. 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>
  14. 14. Connecting Things aria-labelledby aria-describedby aria-flowto aria-owns
  15. 15. Captions! <img src=quot;photo.jpgquot; alt=quot;quot; aria-describedby=quot;pic1quot;> <p role=quot;descriptionquot; id=quot;pic1quot;>Lemmy</p>
  16. 16. Tabindex Previously for tabbing to anchor or form elements:
  17. 17. 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;
  18. 18. For Widgets • Give them a tabindex • Manage keyboard control within the widget • Set up relationships • Update states
  19. 19. Some of this requires complicated Javascript to manage
  20. 20. Live Regions Alerting assistive technology to page changes
  21. 21. aria-live (off, polite, assertive, rude) aria-atomic (true, false) aria-relevant (additions, removals, text)
  22. 22. Example : Pending Tasks <div id=quot;task-listquot; aria-live=quot;politequot; aria-relevant=quot;additionsquot; > <p>Write slides!!!</p> </div>
  23. 23. How? • Set ARIA attributes in markup • XHTML Module, so won't validate if it’s HTML • you can inject them via Javascript
  24. 24. Support? Not yet implemented everywhere.
  25. 25. Browsers: Opera 9.5+, Firefox 1.5+, IE 8 Webkit is working on it
  26. 26. Assistive Technologies: Jaws 7.1+, Windows Eyes 5.5+, NVDA, Firevox (each differs, JAWS 10 pretty good)
  27. 27. Good News • Screenreader users update regularly (74% update within a year according to WebAIM research)
  28. 28. Bad News • Inconsistent implementations • Not quite finalised • Lots of testing to do
  29. 29. HTML 5 or ARIA? <div role=quot;contentinfoquot;> or <footer> or <footer role=quot;contentinfoquot;>?
  30. 30. 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'
  31. 31. Good Resources • Codetalks Wiki - wiki.codetalks.org • Gez Lemon's tutorial - dev.opera.com/articles/view/ introduction-to-wai-aria/
  32. 32. And of Course • ARIA Primer - www.w3.org/TR/wai- aria-primer/ • ARIA Best Practices - www.w3.org/ TR/wai-aria-practices/

×