ARIA intro

1. ARIA intro • WAI ARIA • The problems being addressed • Limitations of the web pidgin • The old and new webs • The ARIA solution (roles, states, properties, regions, keyboard, user agent implementation guide) • How to proceed... • Tools and compliant systems

2. ARIA’s place in the scheme of things • W3C track (part of the Web Accessibility Initiative (WAI) – like WCAG. • A W3C Draft Recommendation:(WAI-ARIA) http://www.w3.org/TR/wai-aria/ • Dense! But different. Will see how…

3. The problem: the pidgin of the web <div id=“masthead”> <ul id=“left”> <div id=“content”> <ul id=“right”> <li id=“yellthng”> <ol id=“footer”> HTML semantics != intended meaning

4. The pidgin of the web, improved <h1id=“masthead”> <ul id=“left”><h2 /> <div id=“content”><h2 /> <ul id=“right”><h2 /> <li id=“yellowthg”><h3/> <ol id=“footer”><h2 /> etc… an example (CTools)

5. AT has to rely on… • making sense of a vocabulary-poor pidgin language skewed for presentation • syntactical conventions • a well trained AT user – and a steep learning curve

6. The old web • sequential flow of information (get and post) –init by client • logic on the server, client is just a get, post, and display technology Get and post Response

7. The new web: asynchronous • Click “Like” • Server updated in the background • No new “page” • DOM manipulations from response: • “Like” > “Unlike” • “You like this” added • Comment box unhidden

8. The new web: asynchronous (2) • Click on “View all 6 comments” • Data retrieved from server async, manipulated into markup and inserted into the DOM

9. The WAI-ARIA solution • Enrich the markup to help AT users read • The document parts: landmark roles • The function of a fragment: all roles • Map events to a11y APIs to help AT interact with the new markup • States of a fragment with a role • Properties of a fragment with a role

10. The WAI-ARIA solution

11. Landmark roles: the problem being addressed <div id=“masthead”> <div id=“left”> ….etc • Presentational markup does not add non visual meaning • Headers, hidden text, etc. help.

12. Non-ARIA solutions <h1 id="mast"> University of Michigan </h1> <h2 class="text">Topic-Based Site-Wide Navigation</h2> <div id="local"> <ul> <li> <a>About U-M</a> </li> Live example

13. Adding non visual meaning to document parts http://www.w3.org/TR/wai-aria/#roleattribute_inherits Example (Paciello Group) Full example (Univ Illin. U-C) application banner complementary contentinfo main navigation search ARIA Landmark roles

14. Land mark roles: attribute/values <h1 role=“banner” /> <div role=“navigation”/> <div role=“main” /> <div role=“complementary” /> <div role=“search” /> <div role=“contentinfo” /> Accessible names and description – calculated (aria-label, aria-describedby, title)

15. Content article definition grid heading (nestedness!) math note etc. (integration with HTML 5) Interactions application combobox dialog marquee progressbar toolbar etc. Other roles to structure:

16. Role taxonomy is: • Descriptive (it does what the name says) • tooltip • tree • directory • Hierarchical • widget > menu > menuitem (or menuitemcheckbox, menuitemradio) • Grid > Row > ( gridcell, rowheader, columnheader)

17. Role taxonomy is: • Related to other taxonomies (easy!) • A grid role is sort of a table • A heading role is sort of a HTML 4 <hx />. Much like a HTML 5 <heading /> • Structured (no DTD, but is coming) • Elements have • required/allowed parents • required/allowed children • Inheritance ----- but fuzzy

18. Some role examples (1) • A set of nested articles <div role=“article”> <div role=“article”>….</div> <div role=“article”> <div role=“article”>….</div> <div role=“article”>….</div> </div> </div>

19. Some role examples (2) • A tool bar (CTools) <ul role="menu"> <li aria-disabled="true"role="menuitem"> <span class="current">My Current Sites</span> </li> <li role="menuitem"> <span> <a title="Joinable Sites" href=“xxx">Joinable Sites</a> </span> </li> </ul>

20. More complex role examples • CITA Radio button groups <h3 id="rg1_label">Lunch Options</h3> <ul id="rg1“ role="radiogroup“ aria-labelledby="rg1_label"> <li id="r1" tabindex="0" role="radio" aria-checked="false">Thai</li> <li id="r2" tabindex="-1" role="radio" aria-checked="false">Subway</li> <li id="r5" tabindex="0" role="radio" aria-checked="false">JJ</li> </ul>

21. More complex role examples • CITA slider <div class="slider" id="sr1"> <img id="sr1_low" src="xxx" role="slider"/> <div id="sr1_low_text“ role="presentation">1950</div> <img id="sr1_high" src="xxx" role="slider" /> <div id="sr1_high_text“ role="presentation">2000</div> </div>

22. Properties and states • Properties: less likely to change, essential of the object <h3 id=“id”>Widget label</h3> <widget aria-labelledby=“id” /> • States: likely to change in the interaction – store values to help AT Enter a number am not entering a number! <input aria-invalid=“true” /> • To help assistive technology user interact with the fragment

23. More state examples • aria-disabled <button onclick=“disable(‘x’)” /> <object id=“x” aria-disabled=“true” /> • aria-hidden <button onclick=“hide(‘x’)” /> <object id=“x” aria-hidden=“true” /> • aria-expanded • <ul aria-expanded=“true”>

24. Live Regions • Any element that may change • Some roles (timer, log, marquee, status) have default settings • aria-atomic (false, true) - [parts/whole] • aria-busy (false, true) • aria-live (off, polite, assertive) - [inherited] • aria-relevant (additions, removals, text, all)

25. Live Regions Example (potential!) Chat Users present

26. Keyboard A11y • Extending tabindex • tabindex=0 • Element can receive focus • tabindex=-1 • Element (and maybe its parts) will be focused programmatically

27. Keyboard A11y - Examples • CITA Radio button groups (again) <h3 id="rg1_label">Lunch Options</h3> <ul id="rg1“ role="radiogroup“ aria-labelledby="rg1_label"> <li id="r1" tabindex="0" role="radio" aria-checked="false">Thai</li> <li id="r2" tabindex="-1" role="radio" aria-checked="false">Subway</li> <li id="r5" tabindex="0" role="radio" aria-checked="false">JJ</li> </ul>

28. Adding ARIA • Adding landmark role attributes to static html • CTools (before / after) • Issues: • Non-valid attributes • Namespacing, browser quirks….

29. Adding ARIA • Adding landmark role attributes dynamically – several techniques • Using class as seed • <div class=“cssClass axs navigation”> • Javascript parses class, adds all strings after axs as the value of a role. Adds role. • <div class=“cssClass” role=“navigation”>

30. Adding landmark roles to Metafilter ariamap.json : { "id":"logo", "role":"banner" }, . . . . . $('#ariame').click(function(){ jQuery.ajax({ url: 'MetaFilter_files/ariamap.json', success: function(data){ for (var i = 0; i < data.length; i++) { var id = data[i].id; var role = data[i].role; $('#' + id).addClass('lime'); $('#' + id).attr('role', role); } }, error: function(){ // console.log(‘error! '); } }); }); Adding ARIA – mapping ids to roles

31. document structure article heading list group directory definition input states and properties <input type="text" name=“name" id=“name" aria-required="true“ value="" /> (freedom from the *) <input type="text" name=“name" id=“name" aria-invalid="true“ value="" /> (after failed validation) Adding ARIA +(roles/states)

32. Adding ARIA: using components/libraries • JQuery-UI • Example: JQuery-UI Dialog (CTools Site Info) • FLUID • Example: List Reorderer (CTools Assignments) • Dojo • Others…

33. Integrating a FLUID compoment in CTools Assignments • Load FLUID library in the application <script type="text/javascript" src="/sakai-assignment-tool/fluid/Fluid-all.js"> </script> • Create small script to identify targets, load options var opts = { selectors: { movables: "[id^=assignment.orderable]" }, listeners: {onBeginMove: preserveStatus, afterMove: registerChange} }; return fluid.reorderList("#assignment-reorder", opts); });

34. FLUID: CTools Assignments • Customize FLUID callbacks • onBeginMove: preserveStatus • afterMove: registerChange • Style elements and states • .orderable-selected • .orderable-drop-marker • .orderable-hover • .orderable-dragging • .orderable-avatar

35. Links • Working Draft • http://www.w3.org/TR/wai-aria/ • A very nice introduction from Opera dev • http://dev.opera.com/articles/view/introduction-to-wai-aria/ • FLUID Project • http://www.fluidproject.org/ • iCITA ARIA Examples • http://test.cita.illinois.edu/