• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wai Aria - An Intro

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



6 Embeds 174

http://eclecticdreams.com 130
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/