A quick Introduction to WAI-ARIA

A QUICK INTRO TOWAI-ARIA

What is WAI- ARIA?

WAI-ARIA stands forAccessible Rich Internet Applications

The Protocols and Formats Working Group (PFWG) published WAI-ARIA 1.0 as a W3C Candidate Recommendation on 18 January 2011.

A bit ofbackground...

HTML is very static. It has avery limited set of interface controls and interactions.

As the demand for rich interaction increased,Javascript became our saviour!

JavaScript provides us with many things including:dynamic interactions such as drag and drop, resizing etc.a rich set of widgets such as date pickers, sliders etc.

However, many of dynamicinteractions and widgets are problematic for Assistive Technologies (ATs).

Many widgets are inaccessible by keyboard ATs may not be made aware ofdynamically generated content as it is updated.

ARIA to the rescue

ARIA allows us to describe properties, states, keyboard access improvements androles to help make widgets and dynamic content accessible.

PropertiesProperties describe the nature of a given object.<p id="item1">First item</p><div><a href="javascript:" role="button"aria-labelledby="item1">Content</a></div>

States States describe the dynamic property of an object that may change in response to user action.<section aria-expanded="true"class="expand"> Text</section>

Keyboard access Allows us to assign tabindex (including tabindex=-1) to any element for greater keyboard control.<div role="toolbar" id="Toolbar"tabindex="0"><div role="toolbar" id="Toolbar"tabindex="-1">

Roles Roles describe elements and their purpose: General concepts (Abstract roles) Interface widgets (Widget roles)Content structure (Document structure roles) Page structure (Landmark roles)

ARIA landmark roles

Landmark roles help us todescribe the overall document structure to assistive devices.

Landmark roles are wellsupported by JAWS, NVDA and Mac OSX Voiceover. They are not as well supported by Window-Eyes.

Roles are announced to the screen reader or braille device eg: “Navigation landmark”<nav role="navigation">! <ul>! ! <li><a href="#">home</a></li>! ! <li><a href="#">about</a></li>! </ul></nav>

Users can use keyboard shortcuts or (in the case ofJAWS) a dialog box to navigate around web pages via Landmark roles.

The landmarks

The banner role is used to describe a region that is overall site orientated, such as a header.Deﬁned with HTML5 Described with ARIA <header role="banner"> ! <h1>Heading</h1> </header>

The search role is used to describe a search function.<form role="search">! search form info here</form>

The navigation role is used to describe a collection of primary navigation elements.<nav role="navigation">! <ul>! ! <li><a href="#">home</a></li>! ! <li><a href="#">about</a></li>! </ul></nav>

The main role is used to describe the main content of the document.<div role="main">! <section></section></div>

The complimentary role is used to describe a region that is complimentary to the main content - such as an aside.<aside role="complimentary">! <h3>Related info</h3></aside>

The contentinfo role is used to describe a regions that deﬁne the overall document, like a footer.<footer role="contentinfo">! <ul>! ! <li>Copyright</li>! ! <li>Contact info</li>! </ul></footer>

The form role is used to describe a form - surprisingly!<form action="#" role="form">! form info here...</form>

<form role=search><header role=banner><nav role=navigation><section role=main> <aside role= <form role=form> complimentary><footer role=contentinfo>

ARIA in forms

ARIA roles are particularly usefulwhen used with form controls,allowing us to describe functions in a variety of powerful ways.

For example, many instructions associated with form controlsuse presentational strategies alone.

We can enhance thesestrategies for ATs using ARIA todescribe aspects of the form and/or its functionality.

aria-required=true

The HTML5 “required” attribute deﬁnes the element as “required”.Deﬁned with HTML5<input required aria-required="true"name="name" id="name" type="text">

The aria-required describes this to ATs. Described with ARIA<input required aria-required="true"name="name" id="name" type="text">

aria-disabled=true

The HTML5 “disabled” attribute deﬁnes the element as “disabled”.Deﬁned with HTML5<input disabled aria-disabled="true"name="name" id="name" type="text">

The aria-required describes this to ATs. Described with ARIA<input disabled aria-disabled="true"name="name" id="name" type="text">

aria-invalid=true

The aria-invalid indicates to ATs which data ﬁelds have incorrect data.<input aria-invalid="true"name="email" id="email" type="text">

aria-describedby

How do you add detailedinstructions to form controls?

You could add the informationinside a <label> element, but this is often not the best location.<label for="date">Date (must be mm/dd/yyyy)</label><input type="text" name="date" id="date">

You could add the information outside the label, but then it may be ignored by ATs.<label for="date">Date</label><input type="text" name="date" id="date"><span>(must be mm/dd/yyyy)</span>

Using aria-describedby, we canassociate a form control with a label and additional information.

The aria-describedby takes the IDs of one or more elements to create an additional description for elements.<label for="date">Date:</label><input type="text" name="date" id="date"aria-describedby="format1" /><span id="format1">(must be mm/dd/yyyy)</span>

Things you can do right now

Step 1Add landmark roles to the main containers on your pages. role=banner role=navigation role=search role=main role=complimentary role=contentinfo

Step 2 Add some simple ARIAattributes into your forms. aria-required="true" aria-disabled="true" aria-invalid="true"aria-describedby="XXX"

Thank you

Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley

http://www.maxdesign.com.au	240
http://charin.dothome.co.kr	89
https://twitter.com	17
http://thinkery.me	6
http://us-w1.rockmelt.com	4
http://meltwaternews.com	2
https://si0.twimg.com	1
http://paper.li	1
http://131.253.14.66	1
http://twicli.neocat.jp	1

A quick Introduction to WAI-ARIA

by Russ Weakley

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 362

Statistics

A quick Introduction to WAI-ARIA Presentation Transcript