Kurze Einführung in WAI-ARIA

1. WAI-ARIA
(…was ist das denn nun schon wieder?)

2. W
A
I
A
R
I
A

3. Web
Accessbility
Initiative
Accessible
Rich
Internet
Applications

4. „WAI-ARIA, the Accessible Rich Internet
Applications Suite, defines a way to make
Web content and Web applications more
accessible to people with disabilities. It
especially helps with dynamic content and
advanced user interface controls
developed with Ajax, HTML, JavaScript,
and related technologies.“
http://www.w3.org/WAI/intro/aria.php

5. Dynamic Content http://www.flickr.com/photos/nickwheeleroz/2166114756/

6. Dynamischer Content

7. Dynamischer Content
Für Screenreader „unsichtbare“ Updates

8. Dynamischer Content
Für Screenreader „unsichtbare“ Updates
…nur Teile der Seite werden per AJAX
aktualisiert

9. Dynamischer Content
Für Screenreader „unsichtbare“ Updates
…nur Teile der Seite werden per AJAX
aktualisiert
User werden über Änderungen auf der Seite
nicht informiert

10. Dynamischer Content
Für Screenreader „unsichtbare“ Updates
…nur Teile der Seite werden per AJAX
aktualisiert
User werden über Änderungen auf der Seite
nicht informiert
AJAX ist in Web-Applikationen aber
mittlerweile Standard, also was tun?

11. „aria-live“
<p aria-live="polite">
Magic happens here!
</p>
Andere Werte der „aria-live“-Eigenschaft sind
„none“ und „assertive“. Quasi die Priorität,
mit der (AJAX-)Aktualisierungen dem User
mitgeteilt werden.

12. „aria-live“-Beispiel
Beispiel von Martin Kliehm (@kliehm)

13. „aria-live“-Beispiel
Beispiel von Martin Kliehm (@kliehm)

14. Advanced UI
controls

15. HTML-Formulare
Relativ limitiertes Set an interaktiven Elementen.

16. …was man eigentlich will:

17. …was man eigentlich will:
Tree

18. …was man eigentlich will:
Slider
Tree

19. …was man eigentlich will:
Slider
Tabs
Tree

20. …was man eigentlich will:
Slider
Tabs
mehr
Tree Zustände

21. …was man eigentlich will:
Slider
Tabs
mehr Accordeon
Tree Zustände

22. …was man eigentlich will:
Slider
Tabs
mehr Accordeon
Tree Zustände
…und noch einiges mehr :)

23. …was man gemacht hat:

24. …was man gemacht hat:
bestehende HTML-Elemente genommen…

25. …was man gemacht hat:
bestehende HTML-Elemente genommen…
…ihnen per JavaScript „Leben eingehaucht“

26. …was man gemacht hat:
bestehende HTML-Elemente genommen…
…ihnen per JavaScript „Leben eingehaucht“
…und so andere UI-Controls imitiert
(„Widgets“)

27. Accessibility-Probleme

28. Accessibility-Probleme
Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich

29. Accessibility-Probleme
Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Status und Eigenschaften sind assistiven
Technologien nicht zugänglich

30. Accessibility-Probleme
Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Status und Eigenschaften sind assistiven
Technologien nicht zugänglich
Aktualisierungen werden nicht mitgeteilt

31. Accessibility-Probleme
Die Rolle/Aufgabe ist assistiven
Technologien nicht ersichtlich
Status und Eigenschaften sind assistiven
Technologien nicht zugänglich
Aktualisierungen werden nicht mitgeteilt
Probleme mit Tastaturnavigation

32. http://www.flickr.com/photos/gemmataylor/2907113624/
WAI-ARIA to the rescue…

33. Tabindex für alle
http://www.flickr.com/photos/alykat/40078437/

34. Tabindex für alle
bisher konnten nur
http://www.flickr.com/photos/alykat/40078437/
manche HTML-Elemente
per Tastatur den Fokus
bekommen
(„durchtabben“)

35. Tabindex für alle
bisher konnten nur
http://www.flickr.com/photos/alykat/40078437/
manche HTML-Elemente
per Tastatur den Fokus
bekommen
(„durchtabben“)
mit WAI-ARIA wird das
tabindex-Attribut auf alle
sichtbaren Elemente
erweitert

36. Rollen-Attribute

37. Rollen-Attribute
ARIA führt das „role“-Attribut ein

38. Rollen-Attribute
ARIA führt das „role“-Attribut ein
bestehende HTML-Elemente…

39. Rollen-Attribute
ARIA führt das „role“-Attribut ein
bestehende HTML-Elemente…
…erweitert mit neuen Eigenschaften („Rollen“)

40. Rollen-Attribute
ARIA führt das „role“-Attribut ein
bestehende HTML-Elemente…
…erweitert mit neuen Eigenschaften („Rollen“)
Verhalten von „Widgets“ wird weiterhin per
JavaScript gesteuert

41. Slider

42. Slider
<input type="image"
src="thumb.gif"
alt="Effectiveness"
role="slider"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="42"
aria-valuetext="42 percent"
aria-labelledby="leffective">

43. Slider – Beispiel
Beispiel von Martin Kliehm (@kliehm)

44. Slider – Beispiel
Beispiel von Martin Kliehm (@kliehm)

45. Tabs

46. Tabs
<div id="tabpanel_1" class="tabpanel">
<ul id="tablist_1" role="tablist">
<li id="tab_1" role="tab" tabindex="0">Crust</li>
<li id="tab_2" role="tab" tabindex="-1">Veges</li>
<li id="tab_3" role="tab" tabindex="-1">Carnivore</li>
<li id="tab_4" role="tab" tabindex="-1">Delivery</li>
</ul>
<div id="panel_1" role="tabpanel" aria-labelledby="tab_1"
aria-hidden="false" style="display: none">…</div>
<div id="panel_2" role="tabpanel" aria-labelledby="tab_2"
aria-hidden="true" style="display: none">…</div>
[...]
</div>

47. Tabs – Beispiel
Beispiel von Martin Kliehm (@kliehm)

48. Tabs – Beispiel
Beispiel von Martin Kliehm (@kliehm)

49. Tree

50. Tree
<div id="tree"role="tree" tabindex="-1" class="tree">
<span tabindex="0" role="treeitem"
aria-expanded="true" id="veggie">Veggies</span>
<div role="group" class="group" id="veggieGroup">
<span tabindex="-1" role="treeitem"
aria-expanded="true">Green</span>
<div role="group" id="greenGroup">
<span tabindex="-1" role="treeitem"
class="treeitem">Asparagus</span>
<span tabindex="-1" role="treeitem"
class="treeitem">Kale</span>
[...]
</div>
[...]
</div>
[...]
</div>

51. Tree – Beispiel
Beispiel von Martin Kliehm (@kliehm)

52. Tree – Beispiel
Beispiel von Martin Kliehm (@kliehm)

53. Required Fields

54. Required Fields
<form action="post">
<label for="firstName">First name:</label>
<input id="firstName" type="text"
aria-required="true" /><br/>
<label for="lastName">Last name:</label>
<input id="lastName" type="text"
aria-required="true" /><br/>
<label for="streetAddress">Street address:</label>
<input id="streetAddress" type="text" />
</form>

55. Required – Beispiel
Beispiel von Martin Kliehm (@kliehm)

56. Required – Beispiel
Beispiel von Martin Kliehm (@kliehm)

57. http://www.flickr.com/photos/tomsen/2899175607/
Document
Landmarks

58. Dokument-Landmarken

59. Dokument-Landmarken
fungieren als „Wegweiser“ im Dokument

60. Dokument-Landmarken
fungieren als „Wegweiser“ im Dokument
beschreiben die „Rollen“ der Sektionen

61. Dokument-Landmarken
fungieren als „Wegweiser“ im Dokument
beschreiben die „Rollen“ der Sektionen
helfen Nutzern assistiver Technologien die
Struktur eines Dokuments schneller zu
erfassen

62. Beispiel

63. Beispiel
<div role="banner">
...
</div>
<div role="navigation">
...
</div>
<div role="main">
...
</div>

64. Beispiel

65. Beispiel

66. Fragen? Fragen!

67. Danke für die
Aufmerksamkeit
Stefan Walter
Diese Präsentation steht unter der
stefan@hessendscher.de
Attribution-Share Alike 3.0
twitter.com/hessendscher