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) http://www.w3.org/TR/wai-aria/

Dense! But different. Will see how…

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

The pidgin of the web, improved

<h1 id=“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)

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 rolesThe function of a fragment: all roles

Map events to a11y APIs to help AT interact with the new markupStates of a fragment with a roleProperties of a fragment with a role

The WAI-ARIA solution

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.

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

ARIA Landmark roles

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

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)

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 <hx />. Much like

a HTML 5 <heading />

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

<div role=“article”><div role=“article”>….</div><div role=“article”>

<div role=“article”>….</div><div role=“article”>….</div>

</div></div>

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>

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>

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>

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

Properties and states

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”>

Live Regions

Any element that may change Some roles (timer, log, marquee, status)

have default settingsaria-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!)

Userspresent

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)

<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>

Adding ARIA

Adding landmark role attributes to static htmlCTools (before / after)

Issues:Non-valid attributesNamespacing, browser quirks….

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”>

Adding ARIA – mapping ids to roles

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 +(roles/states)

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: using components/libraries

JQuery-UI Example: JQuery-UI Dialog (CTools Site Info)

FLUIDExample: List Reorderer (CTools

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"></script>

Create small script to identify targets, load optionsvar 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

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/