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

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) aria/  Dense! But different. Will see how…

The problem: the pidgin of the web HTML semantics != intended meaning

The pidgin of the web, improved etc… an example (CTools)example

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

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

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

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

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

The WAI-ARIA solution

Landmark roles: the problem being addressed ….etc Presentational markup does not add non visual meaning Headers, hidden text, etc. help.

Non-ARIA solutions University of Michigan Topic-Based Site-Wide Navigation About U-M Live exampleexample

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

Land mark roles: attribute/values Accessible names and description – calculated (aria-label, aria- describedby, title)

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

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)

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. Much like a HTML 5 Structured (no DTD, but is coming)  Elements have required/allowed parents required/allowed children Inheritance but fuzzy

Some role examples (1) A set of nested articles …. ….

Some role examples (2) A tool bar (CTools)CTools My Current Sites Joinable Sites

More complex role examples CITA Radio button groups CITA Radio button Lunch Options Thai Subway JJ

More complex role examples CITA slider

Properties: less likely to change, essential of the object Widget label States: likely to change in the interaction – store values to help AT Enter a number am not entering a number! To help assistive technology user interact with the fragment Properties and states

More state examples aria-disabled aria-hidden aria-expanded 

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)

Live Regions Example (potential!) Users present Chat

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

Keyboard A11y - Examples CITA Radio button groups (again) CITA Radio button Lunch Options Thai Subway JJ

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

Adding ARIA Adding landmark role attributes dynamically – several techniques Using class as seed   Javascript parses class, adds all strings after axs as the value of a role. Adds role. 

Adding ARIA – mapping ids to roles Adding landmark roles to MetafilterMetafilter 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 +(roles/states) document structure  article  heading  list  group  directory  definition input states and properties (freedom from the * ) (after failed validation)

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

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"> 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); });

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

Links Working Draft  A very nice introduction from Opera dev  aria/ aria/ FLUID Project  iCITA ARIA Examples 