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

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

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

6. tabindex revisited.

10. Überprüfung der Rolle in der MSAA

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 >

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

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