Your SlideShare is downloading. ×
0
Accessible Rich Internet Applications (ARIA)‏ A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer http:...
Accessible Rich Internet Applications. <ul><li>ARIA ist ein W3C-Entwurf für barrierefreies Web 2.0. Es fügt hinzu: </li></...
Accessible Rich Internet Applications. <ul><li>Februar 2005: Jesse James Garrett prägt den Begriff „ Ajax “ (Asynchronous ...
Wo bin ich? <ul><li>Assistive Technologien (AT) müssen wissen, wo sie sich gerade befinden. </li></ul><ul><li>Problem: bis...
Die Lösung:  tabindex < h1   tabindex = &quot;0&quot;> Chris Heilmann < /h1 >
tabindex  revisited.
Was ist das? <ul><li>So kann man hintabben, aber was ist das? < h1   tabindex = &quot;0&quot;> Chris Heilmann < /h1 > </li...
Semantischer Zuckerguss <ul><li>Das  role -Attribut fügt semantische Bedeutung hinzu: < h1   role = &quot;textfield headin...
Semantischer Zuckerguss <ul><li>Das  role  Attribut ermöglicht es, den Zweck eines Elements mit maschinenlesbarer, semanti...
Überprüfung der Rolle in der MSAA
Rollentypen <ul><li>Es gibt Landmark  role s wie banner ,  main ,  navigation ,  search  oder  secondary </li></ul><ul><li...
Semantischer Zuckerguss < h1   tabindex = &quot;0&quot;  role = &quot;textfield&quot;> Chris Heilmann </ h1 > < ul   role ...
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 = &qu...
ARIA States and Properties. < img   src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot;  role = &quot;check...
ARIA  labelled-by  und  described-by . < label  for = &quot;shutdown-minutes&quot;  id = &quot;sd-label&quot;> Herunterfah...
Live Regions: Ajax Support < div   role = &quot;status&quot;  aria-live = &quot;polite&quot;> Nachname ist erforderlich </...
Implementierung < ?xml   version = &quot;1.0&quot; ? > < !DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML+ARIA 1.0//EN&quot; &...
Beispiele http://www.flickr.com/photos/adactio/89778576/
Erforderliches Eingabefeld < input  type = &quot;text&quot;  name = &quot;name-family&quot; aria-required = &quot;true&quo...
Fehler im Eingabefeld < input  type = &quot;text&quot;  name = &quot;email&quot; aria-required = &quot;true&quot;  aria-in...
Reiternavigation / Registerkarte < ul   role = &quot;tablist&quot;> < li   role = &quot;tab&quot;  id = &quot;tab-1&quot; ...
Reiternavigation / Registerkarte mit Link als Fallback ohne JavaScript < ul   role = &quot;tablist&quot;> < li   role = &q...
JavaScript für Reiternavigation / Registerkarte. <ul><li>Dem aktiven Reiter einen  tabindex = &quot;0&quot;  zuweisen, den...
JavaScript für Reiternavigation / Registerkarte. <ul><li>…  o der ein JavaScript-Framework verwenden: </li></ul><ul><li>dō...
Fortschrittbalken < div  role = &quot;progressbar&quot;  aria-valuenow = &quot;0&quot;  aria-valuemin = &quot;0&quot;  ari...
Schieberegler
Menübaum
Links <ul><li>WAI ARIA 1.0 www.w3.org/TR/wai-aria/ </li></ul><ul><li>Introduction to WAI ARIA dev.opera.com/articles/view/...
Besten Dank für Ihre Aufmerksamkeit. martin.kliehm (at) namics.com http://www.flickr.com/photos/delay_tactics/207364039/
Upcoming SlideShare
Loading in...5
×

ARIA

5,634

Published on

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

Published in: Education
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,634
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
35
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide
  • Transcript of "ARIA"

    1. 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. 2. Accessible Rich Internet Applications. <ul><li>ARIA ist ein W3C-Entwurf für barrierefreies Web 2.0. Es fügt hinzu: </li></ul><ul><li>Fokusierbarkeit </li></ul><ul><li>Semantik </li></ul><ul><li>den aktueller Zustand </li></ul><ul><li>Beziehungen zwischen Elementen </li></ul><ul><li>informiert über dynamische Aktualisierungen </li></ul>
    3. 3. Accessible Rich Internet Applications. <ul><li>Februar 2005: Jesse James Garrett prägt den Begriff „ Ajax “ (Asynchronous JavaScript and XML)‏ </li></ul><ul><li>März 2005: Richard Schwerdtfeger und Becky Gibson stellen ARIA auf CSUN vor </li></ul><ul><li>August 2005: IBM spendet eine große Menge Quellcode für den Mozilla Browser </li></ul><ul><li>August 2005: Die ersten Standardentwürfe für ARIA werden veröffentlicht </li></ul><ul><li>Juli 2006: Das Role-Attribut wird als XHTML-Modul veröffentlicht </li></ul><ul><li>2008: Opera, Apple und Microsoft unterstützen ARIA </li></ul>
    4. 4. Wo bin ich? <ul><li>Assistive Technologien (AT) müssen wissen, wo sie sich gerade befinden. </li></ul><ul><li>Problem: bisher konnten nur Links und Texteingabefelder den Tab-Fokus erhalten </li></ul>
    5. 5. Die Lösung: tabindex < h1 tabindex = &quot;0&quot;> Chris Heilmann < /h1 >
    6. 6. tabindex revisited.
    7. 7. Was ist das? <ul><li>So kann man hintabben, aber was ist das? < h1 tabindex = &quot;0&quot;> Chris Heilmann < /h1 > </li></ul>
    8. 8. Semantischer Zuckerguss <ul><li>Das role -Attribut fügt semantische Bedeutung hinzu: < h1 role = &quot;textfield heading&quot; tabindex = &quot;0&quot;> Chris Heilmann < /h1 > </li></ul>
    9. 9. Semantischer Zuckerguss <ul><li>Das role Attribut ermöglicht es, den Zweck eines Elements mit maschinenlesbarer, semantischer Information auszustatten. </li></ul><ul><li>Der User Agent mappt die Rolle in die Accessibility API des zugrundeliegenden Frameworks. Tool zur Überprüfung z.B. MsaaVerify </li></ul><ul><li>Assistive Technologien (z.B. Screenreader wie Window Eyes 5.5+, JAWS 7.0+, ZoomText, NVDA, Orca) können die Rolle dann verwenden. </li></ul>
    10. 10. Überprüfung der Rolle in der MSAA
    11. 11. Rollentypen <ul><li>Es gibt Landmark role s wie banner , main , navigation , search oder secondary </li></ul><ul><li>Document Structure role s wie description , directory , group , presentation , region , section , separator </li></ul><ul><li>User Input Control role s wie input , select , listbox , combobox , option , checkbox , radio , radiogroup , textbox , range , spinbutton </li></ul><ul><li>User Interface Element role s wie button , link , menu , menubar , toolbar , menuitem , slider , tooltip , tabpanel , tablist , tab , tree , treeitem </li></ul><ul><li>Specialized role s wie alert , application , dialog , marquee , log , status , progressbar , timer </li></ul>
    12. 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. 13. Semantischer Zuckerguss role = &quot;dialog&quot;
    14. 14. Semantischer Zuckerguss role = &quot;dialog&quot;
    15. 15. Welchen Zustand hat dieses Element? < img src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot; role = &quot;checkbox&quot; />
    16. 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. 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. 18. Live Regions: Ajax Support < div role = &quot;status&quot; aria-live = &quot;polite&quot;> Nachname ist erforderlich </ div >
    19. 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. 20. Beispiele http://www.flickr.com/photos/adactio/89778576/
    21. 21. Erforderliches Eingabefeld < input type = &quot;text&quot; name = &quot;name-family&quot; aria-required = &quot;true&quot; value = &quot;&quot; />
    22. 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. 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. 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. 25. JavaScript für Reiternavigation / Registerkarte. <ul><li>Dem aktiven Reiter einen tabindex = &quot;0&quot; zuweisen, den inkativen tabindex = &quot;-1&quot; </li></ul><ul><li>Event Listener für onclick , onkeydown , onkeypress setzen, Event Delegation einsetzen </li></ul><ul><li>Tastaturbedienbarkeit einarbeiten: Pfeiltasten, strg + Tab, strg + Shift + Tab </li></ul><ul><li>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 </li></ul><ul><li>Den Screenreaderbuffer aktualisieren </li></ul><ul><li>http://www.w3.org/TR/wai-aria-practices/#TabPanel </li></ul>
    26. 26. JavaScript für Reiternavigation / Registerkarte. <ul><li>… o der ein JavaScript-Framework verwenden: </li></ul><ul><li>dōjō </li></ul><ul><li>YUI </li></ul><ul><li>jQuery UI </li></ul><ul><li>In jQuery UI ist ARIA noch sehr neu und derzeit nicht vollständig implementiert. </li></ul>
    27. 27. Fortschrittbalken < div role = &quot;progressbar&quot; aria-valuenow = &quot;0&quot; aria-valuemin = &quot;0&quot; aria-valuemax = &quot;50&quot; />
    28. 28. Schieberegler
    29. 29. Menübaum
    30. 30. Links <ul><li>WAI ARIA 1.0 www.w3.org/TR/wai-aria/ </li></ul><ul><li>Introduction to WAI ARIA dev.opera.com/articles/view/introduction-to-wai-aria/ </li></ul><ul><li>WAI ARIA Best Practices www.w3.org/TR/wai-aria-practices/ </li></ul><ul><li>Mozilla ARIA FAQ developer.mozilla.org </li></ul><ul><li>Mein Blog learningtheworld.eu </li></ul>
    31. 31. Besten Dank für Ihre Aufmerksamkeit. martin.kliehm (at) namics.com http://www.flickr.com/photos/delay_tactics/207364039/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×