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