1 Accessible Rich Internet Applications (ARIA) A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer

Präsentation zum Thema: "1 Accessible Rich Internet Applications (ARIA) A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer"—  Präsentation transkript:

1 1 www.namics.com Accessible Rich Internet Applications (ARIA) A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer http://www.flickr.com/photos/950/2116094803/

2 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 3 www.namics.com Accessible Rich Internet Applications. »Februar 2005: Jesse James Garrett prägt den BegriffAjax (Asynchronous JavaScript and XML)Ajax »März 2005: Richard Schwerdtfeger und Becky Gibson stellen ARIA auf CSUN vorARIA »August 2005: IBM spendet eine große Menge Quellcode für den Mozilla Browsergroße Menge Quellcode »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 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 5 www.namics.com Die Lösung: tabindex Chris Heilmann

6 6 www.namics.com tabindex revisited.

7 7 www.namics.com Was ist das? »So kann man hintabben, aber was ist das? Chris Heilmann

8 8 www.namics.com Semantischer Zuckerguss »Das role -Attribut fügt semantische Bedeutung hinzu: Chris Heilmann

9 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. MsaaVerifyMsaaVerify »Assistive Technologien (z.B. Screenreader wie Window Eyes 5.5+, JAWS 7.0+, ZoomText, NVDA, Orca) können die Rolle dann verwenden.

10 10 www.namics.com Überprüfung der Rolle in der MSAA

11 11 www.namics.com Rollentypen »Es gibt Landmark role s wie banner, main, navigation, search oder secondary »Document Structure role s wie description, directory, group, presentation, region, section, separator »User Input Control role s wie input, select, listbox, combobox, option, checkbox, radio, radiogroup, textbox, range, spinbutton »User Interface Element role s wie button, link, menu, menubar, toolbar, menuitem, slider, tooltip, tabpanel, tablist, tab, tree, treeitem »Specialized role s wie alert, application, dialog, marquee, log, status, progressbar, timer

12 12 www.namics.com Semantischer Zuckerguss Chris Heilmann […]

13 13 www.namics.com Semantischer Zuckerguss role="dialog"

14 14 www.namics.com Semantischer Zuckerguss role="dialog"

15 15 www.namics.com Welchen Zustand hat dieses Element?

16 16 www.namics.com ARIA States and Properties. Change sort order price

17 17 www.namics.com ARIA labelled-by und described-by. Herunterfahren nach Minuten

18 18 www.namics.com Live Regions: Ajax Support Nachname ist erforderlich

19 19 www.namics.com Implementierung […]

20 20 www.namics.com Beispiele http://www.flickr.com/photos/adactio/89778576/

21 21 www.namics.com Erforderliches Eingabefeld

22 22 www.namics.com Fehler im Eingabefeld

23 23 www.namics.com Reiternavigation / Registerkarte Aktuelles Projekte Ansprechpartner Institute […]

24 24 www.namics.com Reiternavigation / Registerkarte mit Link als Fallback ohne JavaScript Aktuelles […]

25 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 26 www.namics.com JavaScript für Reiternavigation / Registerkarte. … oder ein JavaScript-Framework verwenden: »dōjōdōjō »YUIYUI »jQuery UIjQuery UI In jQuery UI ist ARIA noch sehr neu und derzeit nicht vollständig implementiert.

27 27 www.namics.com Fortschrittbalken

28 28 www.namics.com Schieberegler

29 29 www.namics.com Menübaum

30 30 www.namics.com Links »WAI ARIA 1.0 www.w3.org/TR/wai-aria/ www.w3.org/TR/wai-aria/ »Introduction to WAI ARIA dev.opera.com/articles/view/introduction-to-wai-aria/ dev.opera.com/articles/view/introduction-to-wai-aria/ »WAI ARIA Best Practices www.w3.org/TR/wai-aria-practices/ www.w3.org/TR/wai-aria-practices/ »Mozilla ARIA FAQ developer.mozilla.org developer.mozilla.org »Mein Blog learningtheworld.eu learningtheworld.eu

31 31 www.namics.com Besten Dank für Ihre Aufmerksamkeit. martin.kliehm (at) namics.com http://www.flickr.com/photos/delay_tactics/207364039/