1 www.namics.com

Accessible Rich Internet Applications (ARIA)

A-Tag, Wien, 21. November 2008A-Tag, Wien, 21. November 2008

Martin Kliehm, Senior Frontend EngineerMartin Kliehm, Senior Frontend Engineer

http://www.flickr.com/photos/950/2116094803/

2 www.namics.com

Accessible Rich Internet Applications.

ARIA ist ein W3C-Entwurf für barrierefreies Web 2.0. Es fügt hinzu:

»Fokusierbarkeit

»Semantik

»den aktueller Zustand

»Beziehungen zwischen Elementen

»informiert über dynamische Aktualisierungen

3 www.namics.com

Accessible Rich Internet Applications.

» Februar 2005: Jesse James Garrett prägt den Begriff„Ajax“ (Asynchronous JavaScript and XML)

» März 2005: Richard Schwerdtfeger und Becky Gibson stellen ARIA auf CSUN vor

» August 2005: IBM spendet eine große Menge Quellcode für den Mozilla Browser

» August 2005: Die ersten Standardentwürfe für ARIA werden veröffentlicht

» Juli 2006: Das Role-Attribut wird als XHTML-Modul veröffentlicht

» 2008: Opera, Apple und Microsoft unterstützen ARIA

4 www.namics.com

Wo bin ich?

» Assistive Technologien (AT) müssen wissen, wo sie sich gerade befinden.

» Problem: bisher konnten nur Links und Texteingabefelder den Tab-Fokus erhalten

5 www.namics.com

Die Lösung: tabindex

<h1 tabindex="0">Chris Heilmann</h1>

6 www.namics.com

tabindex revisited.

navigierbar per Tabulator

default

ja

tabindex="0" ja

ja

fokusierbar per Maus oder focus()

kein tabindex default (Formulare, Links)

tabindex="-1" nein, Autoren müssen element.focus() als Resultat der Bedienung einer Pfeil- oder anderen Taste setzen

ja, in der relativen Reihenfolge der Elemente im Dokument

Positiv, z.B. tabindex="100"

ja, der tabindex bestimmt direkt die Tab-Reihenfolge des Ele-ments. Diese Elemente kommen vor denen mit tabindex="0" oder ohne tabindex

7 www.namics.com

Was ist das?

» So kann man hintabben, aber was ist das?

<h1 tabindex="0">Chris Heilmann</h1>

8 www.namics.com

Semantischer Zuckerguss

» Das role-Attribut fügt semantische Bedeutung hinzu:

<h1 role="textfield heading" tabindex="0">Chris Heilmann

</h1>

9 www.namics.com

Semantischer Zuckerguss

» Das role Attribut ermöglicht es, den Zweck eines Elements mit maschinenlesbarer, semantischer Information auszustatten.

» Der User Agent mappt die Rolle in die Accessibility API des zugrundeliegenden Frameworks. Tool zur Überprüfung z.B. MsaaVerify

» Assistive Technologien (z.B. Screenreader wie Window Eyes 5.5+, JAWS 7.0+, ZoomText, NVDA, Orca) können die Rolle dann verwenden.

10 www.namics.com

Überprüfung der Rolle in der MSAA

11 www.namics.com

Rollentypen

» Es gibt Landmark roles wiebanner, main, navigation, search oder secondary

» Document Structure roles wiedescription, directory, group, presentation, region, section, separator

» User Input Control roles wieinput, select, listbox, combobox, option, checkbox, radio, radiogroup, textbox, range, spinbutton

» User Interface Element roles wiebutton, link, menu, menubar, toolbar, menuitem, slider, tooltip, tabpanel, tablist, tab, tree, treeitem

» Specialized roles wiealert, application, dialog, marquee, log, status, progressbar, timer

12 www.namics.com

Semantischer Zuckerguss

<h1 tabindex="0" role="textfield">Chris Heilmann</h1>

<ul role="navigation"> […] </ul>

<img src="checkbox-with-rounded-corners-and-dropshadow.gif" role="checkbox" />

13 www.namics.com

Semantischer Zuckerguss

role="dialog"

14 www.namics.com

Semantischer Zuckerguss

role="dialog"

15 www.namics.com

Welchen Zustand hat dieses Element?

<img src="checkbox-with-rounded-corners-and-dropshadow.gif" role="checkbox" />

16 www.namics.com

ARIA States and Properties.

<img src="checkbox-with-rounded-corners-and-dropshadow.gif" role="checkbox"aria-checked="true" />

<input type="text" name="email"aria-required="true" />

<div role="wairole:button"aria-controls="price">Change sortorder</div>

<h2 id="price" aria-sort="descending">price</h2>

17 www.namics.com

ARIA labelled-by und described-by.

<label for="shutdown-minutes" id="sd-label">Herunterfahren nach</label>

<input type="text" name="shutdown“id="shutdown-minutes" value=""aria-labelled-by="sd-label sd-unit"aria-described-by="sd-description" />

<span id="sd-unit">Minuten</span>

18 www.namics.com

Live Regions: Ajax Support

<div role="status" aria-live="polite">Nachname ist erforderlich</div>

19 www.namics.com

Implementierung

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML+ARIA 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-aria-1.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

[…]

</html>

20 www.namics.com

Beispiele

http://www.flickr.com/photos/adactio/89778576/

21 www.namics.com

Erforderliches Eingabefeld

<input type="text" name="name-family"aria-required="true" value="" />

22 www.namics.com

Fehler im Eingabefeld

<input type="text" name="email"aria-required="true" aria-invalid="true" value="foo bar" />

23 www.namics.com

Reiternavigation / Registerkarte

<ul role="tablist">

<li role="tab" id="tab-1" aria-controls="panel-1">Aktuelles

</li><li role="tab">Projekte</li><li role="tab">Ansprechpartner</li><li role="tab">Institute</li>

</ul>

<div role="tabpanel" id="panel-1">[…]</div>

24 www.namics.com

Reiternavigation / Registerkarte mit Link als Fallback ohne JavaScript

<ul role="tablist">

<li role="presentation">

<a href="#aktuelles" role="tab"id="tab-1" aria-controls="panel-1">

Aktuelles

</a> </li>

[…]

</ul>

25 www.namics.com

JavaScript für Reiternavigation / Registerkarte.

» Dem aktiven Reiter einen tabindex="0" zuweisen, den inkativen tabindex="-1"

» Event Listener für onclick, onkeydown, onkeypress setzen, Event Delegation einsetzen

» Tastaturbedienbarkeit einarbeiten:Pfeiltasten, strg + Tab, strg + Shift + Tab

» Bei Klick den aktiven Reiter per class="active" und tabindex="0" kennzeichnen, bei den inaktiven die Klasse entfernen und tabindex="-1" setzen, aktives Tabpanel einblenden

» Den Screenreaderbuffer aktualisieren

http://www.w3.org/TR/wai-aria-practices/#TabPanel

26 www.namics.com

JavaScript für Reiternavigation / Registerkarte.

… oder ein JavaScript-Framework verwenden:

» dōjō

» YUI

» jQuery UI

In jQuery UI ist ARIA noch sehr neu und derzeit nicht vollständig implementiert.

27 www.namics.com

Fortschrittbalken

<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" />

28 www.namics.com

Schieberegler

29 www.namics.com

Menübaum

30 www.namics.com

Links

» WAI ARIA 1.0www.w3.org/TR/wai-aria/

» Introduction to WAI ARIAdev.opera.com/articles/view/introduction-to-wai-aria/

» WAI ARIA Best Practiceswww.w3.org/TR/wai-aria-practices/

» Mozilla ARIA FAQdeveloper.mozilla.org

» Mein Bloglearningtheworld.eu

31 www.namics.com

Besten Dank für Ihre Aufmerksamkeit.

martin.kliehm (at) namics.com

http://www.flickr.com/photos/delay_tactics/207364039/