Search

Wai Aria - An Intro

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    2 Favorites

    Wai Aria - An Intro - Presentation Transcript

    1. WAI ARIA Intro Matt Machell Multipack Feb 09 eclecticdreams.com
    2. Accessible Rich Internet Applications
    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=\"content\" role=\"main\" > <form id=\"search\" role=\"search\"> <div id=\"footer\" role=\"contentinfo\"> 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=\"application\"> <body role=\"document\">
    12. States & Properties aria-valuenow aria-valuemin aria-valuemax aria-checked
    13. 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>
    14. Connecting Things aria-labelledby aria-describedby aria-flowto aria-owns
    15. Captions! <img src=\"photo.jpg\" alt=\"\" aria-describedby=\"pic1\"> <p role=\"description\" id=\"pic1\">Lemmy</p>
    16. Tabindex Previously for tabbing to anchor or form elements:
    17. Tabindex - Revised! no tabindex - default behaviour tabindex=\"0\" - Document order tabindex=\"-1\" - focus-able via javascript tabindex=\"1\" - in order before tabindex=\"0\"
    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=\"task-list\" aria-live=\"polite\" aria-relevant=\"additions\" > <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=\"contentinfo\"> or <footer> or <footer role=\"contentinfo\">?
    30. IE 8 Implementation Oddities element.setAttribute(\"aria- valuenow\", \"50\"); 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/

    + ShuckleShuckle, 9 months ago

    custom

    1103 views, 2 favs, 1 embeds more stats

    Talk on WAI-ARIA from Multipack Presents in Februar more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1103
      • 1019 on SlideShare
      • 84 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 4
    Most viewed embeds
    • 84 views on http://eclecticdreams.com

    more

    All embeds
    • 84 views on http://eclecticdreams.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved