1 accessible rich internet applications (aria) a-tag, wien, 21. november 2008 martin kliehm, senior...
Post on 05-Apr-2015
104 Views
Preview:
TRANSCRIPT
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/
top related