Wai Aria - An Intro

33 %
67 %
Information about Wai Aria - An Intro

Published on February 22, 2009

Author: Shuckle

Source: slideshare.net


Talk on WAI-ARIA from Multipack Presents in February

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/

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

WAI-ARIA Overview - World Wide Web Consortium

Quick links: WAI-ARIA, User Agent Implementation Guide, FAQ. See also FAQ: What is the current status of WAI-ARIA development? Introduction. WAI-ARIA, the ...
Read more

Dev.Opera — Introduction to WAI ARIA

This article is also available in: Belorussian: Уводзіны ў WAI ARIA, translated by Bohdan Zograf; Bulgarian: Въведение в WAI ARIA ...
Read more

An introduction to using WAI-ARIA to enable Web 2.0 ...

An introduction to using WAI-ARIA to enable Web 2.0 accessibility ... Before WAI-ARIA, screen readers like JAWS often did not read text that was ...
Read more

Introduction | Accessible Rich Internet Applications (WAI ...

1.4. Co-Evolution of WAI-ARIA and Host Languages # WAI-ARIA is intended to augment semantics in supporting languages like HTML and SVG, or to be used as an ...
Read more

An Introduction to WAI-ARIA - SitePoint

Stephan Max offers an introduction to using WAI-ARIA roles and properties in your HTML to make your pages and apps more accessible to assistive ...
Read more

The Accessibility of WAI-ARIA · An A List Apart Article

The Accessibility of WAI-ARIA. by Detlev Fischer November 30, 2010 Published in Accessibility. Web developers interested in accessibility issues often ...
Read more

What is WAI-ARIA, what does it do for me, and what not ...

WAI-ARIA role Native element Notes; button: button: use type=”button” if it should not act as a submit button: checkbox: input type=”checkbox ...
Read more

WAI-ARIA - Quora

http://www.w3.org/WAI/intro/aria. ... WAI-ARIA roles and attributes add semantic metadata that do not only help specialized user agents f...
Read more

Using ARIA in HTML | HTML5 Doctor

ARIA (WAI-ARIA if you want to be formal) is a set of attributes that you can add to HTML elements. These attributes communicate role, state and property ...
Read more