ARIA
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

ARIA

  • 8,658 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,658
On Slideshare
7,976
From Embeds
682
Number of Embeds
13

Actions

Shares
Downloads
34
Comments
2
Likes
8

Embeds 682

http://blog.namics.com 593
http://learningtheworld.eu 48
http://accessibility.namics.com 17
http://lanyrd.com 8
http://blog.sensee.de 6
http://c930cms1.consultas.ch:7777 2
http://translate.googleusercontent.com 2
http://sosicles.rss.ch 1
http://www.agenturblogs.de 1
http://www.slideshare.net 1
http://www.netvibes.com 1
http://www.google.ch 1
http://web.archive.org 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Accessible Rich Internet Applications (ARIA)‏ A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer http://www.flickr.com/photos/950/2116094803/
  • 2. 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. 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. 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. Die Lösung: tabindex < h1 tabindex = &quot;0&quot;> Chris Heilmann < /h1 >
  • 6. tabindex revisited.
  • 7. Was ist das?
    • So kann man hintabben, aber was ist das? < h1 tabindex = &quot;0&quot;> Chris Heilmann < /h1 >
  • 8. Semantischer Zuckerguss
    • Das role -Attribut fügt semantische Bedeutung hinzu: < h1 role = &quot;textfield heading&quot; tabindex = &quot;0&quot;> Chris Heilmann < /h1 >
  • 9. 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. Überprüfung der Rolle in der MSAA
  • 11. 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. 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; />
  • 13. Semantischer Zuckerguss role = &quot;dialog&quot;
  • 14. Semantischer Zuckerguss role = &quot;dialog&quot;
  • 15. Welchen Zustand hat dieses Element? < img src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot; role = &quot;checkbox&quot; />
  • 16. 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 >
  • 17. 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 >
  • 18. Live Regions: Ajax Support < div role = &quot;status&quot; aria-live = &quot;polite&quot;> Nachname ist erforderlich </ div >
  • 19. 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 >
  • 20. Beispiele http://www.flickr.com/photos/adactio/89778576/
  • 21. Erforderliches Eingabefeld < input type = &quot;text&quot; name = &quot;name-family&quot; aria-required = &quot;true&quot; value = &quot;&quot; />
  • 22. 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; />
  • 23. 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 >
  • 24. 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 >
  • 25. 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
  • 26. 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.
  • 27. Fortschrittbalken < div role = &quot;progressbar&quot; aria-valuenow = &quot;0&quot; aria-valuemin = &quot;0&quot; aria-valuemax = &quot;50&quot; />
  • 28. Schieberegler
  • 29. Menübaum
  • 30. 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
  • 31. Besten Dank für Ihre Aufmerksamkeit. martin.kliehm (at) namics.com http://www.flickr.com/photos/delay_tactics/207364039/