ARIA

57 %
43 %
Information about ARIA
Education

Published on November 24, 2008

Author: kliehm

Source: slideshare.net

Description

Presentation about the emerging W3C standard for Accessible Rich Internet Applications (ARIA) with screenreader demos (German)

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

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

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

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

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

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

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

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

Die Lösung: tabindex < h1 tabindex = &quot;0&quot;> Chris Heilmann < /h1 >

tabindex revisited.

Was ist das? So kann man hintabben, aber was ist das? < h1 tabindex = &quot;0&quot;> Chris Heilmann < /h1 >

So kann man hintabben, aber was ist das? < h1 tabindex = &quot;0&quot;> Chris Heilmann < /h1 >

Semantischer Zuckerguss Das role -Attribut fügt semantische Bedeutung hinzu: < h1 role = &quot;textfield heading&quot; tabindex = &quot;0&quot;> Chris Heilmann < /h1 >

Das role -Attribut fügt semantische Bedeutung hinzu: < h1 role = &quot;textfield heading&quot; tabindex = &quot;0&quot;> Chris Heilmann < /h1 >

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.

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.

Überprüfung der Rolle in der MSAA

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

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

Semantischer Zuckerguss < h1 tabindex = &quot;0&quot; role = &quot;textfield&quot;> Chris Heilmann </ h1 > < ul role = &quot;navigation&quot;> […] </ ul > < img src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot; role = &quot;checkbox&quot; />

Semantischer Zuckerguss role = &quot;dialog&quot;

Semantischer Zuckerguss role = &quot;dialog&quot;

Welchen Zustand hat dieses Element? < img src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot; role = &quot;checkbox&quot; />

ARIA States and Properties. < img src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot; role = &quot;checkbox&quot; aria-checked = &quot;true&quot; /> < input type = &quot;text&quot; name = &quot;email&quot; aria-required = &quot;true&quot; /> < div role = &quot;wairole:button&quot; aria-controls = &quot;price&quot;> Change sort order </ div > < h2 id = &quot;price&quot; aria-sort = &quot;descending&quot;> price </ h2 >

ARIA labelled-by und described-by . < label for = &quot;shutdown-minutes&quot; id = &quot;sd-label&quot;> Herunterfahren nach </ label > < input type = &quot;text&quot; name = &quot;shutdown“ id = &quot;shutdown-minutes&quot; value = &quot;&quot; aria-labelled-by = &quot;sd-label sd-unit&quot; aria-described-by = &quot;sd-description&quot; /> < span id = &quot;sd-unit&quot;> Minuten </ span >

Live Regions: Ajax Support < div role = &quot;status&quot; aria-live = &quot;polite&quot;> Nachname ist erforderlich </ div >

Implementierung < ?xml version = &quot;1.0&quot; ? > < !DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML+ARIA 1.0//EN&quot; &quot;http://www.w3.org/MarkUp/DTD/xhtml-aria-1.dtd&quot;> < html xmlns = &quot; http://www.w3.org/1999/xhtml &quot; xml:lang = &quot;en&quot;> […] </ html >

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

Erforderliches Eingabefeld < input type = &quot;text&quot; name = &quot;name-family&quot; aria-required = &quot;true&quot; value = &quot;&quot; />

Fehler im Eingabefeld < input type = &quot;text&quot; name = &quot;email&quot; aria-required = &quot;true&quot; aria-invalid = &quot;true&quot; value = &quot;foo bar&quot; />

Reiternavigation / Registerkarte < ul role = &quot;tablist&quot;> < li role = &quot;tab&quot; id = &quot;tab-1&quot; aria-controls = &quot;panel-1&quot;> Aktuelles </ li > < li role = &quot;tab&quot;> Projekte </ li > < li role = &quot;tab&quot;> Ansprechpartner </ li > < li role = &quot;tab&quot;> Institute </ li > </ ul > < div role = &quot;tabpanel&quot; id = &quot;panel-1&quot;> […] </ div >

Reiternavigation / Registerkarte mit Link als Fallback ohne JavaScript < ul role = &quot;tablist&quot;> < li role = &quot;presentation&quot;> < a href = &quot;#aktuelles&quot; role = &quot;tab&quot; id = &quot;tab-1&quot; aria-controls = &quot;panel-1&quot;> Aktuelles </ a > </ li > […] </ ul >

JavaScript für Reiternavigation / Registerkarte. Dem aktiven Reiter einen tabindex = &quot;0&quot; zuweisen, den inkativen tabindex = &quot;-1&quot; 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 = &quot;active&quot; und tabindex = &quot;0&quot; kennzeichnen, bei den inaktiven die Klasse entfernen und tabindex = &quot;-1&quot; setzen, aktives Tabpanel einblenden Den Screenreaderbuffer aktualisieren http://www.w3.org/TR/wai-aria-practices/#TabPanel

Dem aktiven Reiter einen tabindex = &quot;0&quot; zuweisen, den inkativen tabindex = &quot;-1&quot;

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 = &quot;active&quot; und tabindex = &quot;0&quot; kennzeichnen, bei den inaktiven die Klasse entfernen und tabindex = &quot;-1&quot; setzen, aktives Tabpanel einblenden

Den Screenreaderbuffer aktualisieren

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

JavaScript für Reiternavigation / Registerkarte. … o der ein JavaScript-Framework verwenden: dōjō YUI jQuery UI In jQuery UI ist ARIA noch sehr neu und derzeit nicht vollständig implementiert.

… o der ein JavaScript-Framework verwenden:

dōjō

YUI

jQuery UI

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

Fortschrittbalken < div role = &quot;progressbar&quot; aria-valuenow = &quot;0&quot; aria-valuemin = &quot;0&quot; aria-valuemax = &quot;50&quot; />

Schieberegler

Menübaum

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

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

Introduction to WAI ARIA dev.opera.com/articles/view/introduction-to-wai-aria/

WAI ARIA Best Practices www.w3.org/TR/wai-aria-practices/

Mozilla ARIA FAQ developer.mozilla.org

Mein Blog learningtheworld.eu

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

Add a comment

Related presentations

Related pages

Aria – Wikipedia

Aria steht für: Aria (Satrapie), ein historisches Gebiet in Zentralasien; Aria (Spanien), Ortsteil von Aezkoa, Region Navarra; Aria (Name), ein ...
Read more

ARIA: Summary for ARIAD Pharmaceuticals, Inc.- Yahoo! Finance

View the basic ARIA stock chart on Yahoo! Finance. Change the date range, chart type and compare ARIAD Pharmaceuticals, Inc. against other companies.
Read more

Arian – Wikipedia

Arian ist ein männlicher Vorname und Familienname. Herkunft und Bedeutung des Namens. Der Name Arian kommt in verschiedenen Kulturen mit ...
Read more

arias GmbH: Willkommen

Die arias gmbh wurde 1965 in Radevormwald als Kunststoff verarbeitendes Unternehmen gegründet. Seit 1982 konzentriert sich arias auf die Herstellung ...
Read more

ARIA Resort & Casino - Las Vegas Hotels

ARIA is the ultimate luxury Las Vegas Hotel & Casino Resort offering 4004 guest rooms, 568 luxury suites, 4 pools and 150000feet of gaming.
Read more

Aria - Wikipedia, the free encyclopedia

An aria (; Italian: air; plural: arie, or arias in common usage, diminutive form arietta or ariette) in music was originally any expressive melody, usually ...
Read more

Aria: Gitarren | eBay

Finden Sie tolle Angebote auf eBay für Aria in E-Gitarren. Verkäufer mit Top-Bewertung.
Read more

ARIA Resort & Casino - Facebook

ARIA Resort & Casino, Las Vegas, NV. 919,269 likes · 7,283 talking about this · 1,241,655 were here. ARIA Resort & Casino is a AAA Five Diamond Award...
Read more

Aria Montgomery - Pretty Little Liars Wiki - Wikia

Aria Montgomery ist eine der Hauptcharaktere von Pretty Little Liars. Sie ist die Tochter von…
Read more

Official Site - Aria Guitars Co.

Official website of Aria Guitars Co. Leading in quality and excellence of electric, acoustic, bass, and classical guitars since 1965.
Read more