ARIA und HTML5 in freier Wildbahn. Beispiele von Accessible Rich Internet Applications ins Kundenprojekten.

1. ARIA und HTML5
in freier Wildbahn
Martin Kliehm. @kliehm
Senior Frontend Engineer.
Namics. http://www.flickr.com/photos/73594239@N00/8937968/

2. Oder doch
eher so?
http://www.flickr.com/photos/angelinawb/2086914195/

4. Projekte von Namics

8. Accessible Rich
Internet Applications
(ARIA)

9. Zuerst
die niedrig
hängenden
Früchte
http://www.flickr.com/photos/pgasston/1372139756/

10. <input type="text"
aria-required="true" />

11. <input type="text"
aria-required="true"
aria-invalid="true" />

12. http://www.flickr.com/photos/lwr/2057056544/

13. http://webaim.org/blog/spam_free_accessible_forms/

15. <ul role="menu navigation">
<li role="menuitem">
<a href="…">Über Fraunhofer</a>
</li>
</ul>

16. <a
role="button"
aria-controls="nav-direct-third"
tabindex="0"
title="Untermenü">
Schnellzugriff
</a>
<ul id="nav-direct-third"
role="menu navigation"
aria-expanded="true">
<li role="menuitem">
<a href="…">Presse / Medien</a>
</li>
</ul>

17. HTML 5: Canvas

20. <canvas />

21. CSS 3

22. border-radius: 16px 16px 0 0;
-moz-border-radius: 16px 16px 0 0;
/* Webkit does suppport no more than
two values for border-radius */
-webkit-border-top-left-radius: 16px;
-webkit-border-top-right-radius: 16px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;

23. <!--[if vml]>
<script type="text/javascript">
var isVML = true;
</script>
<![endif]-->
v:roundrect {
behavior: url(#default#VML);
height: 100%;
left: -1px;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}

25. HTML 5: Geolocation

26. if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition(
SBS.foundLocation
);
}

27. ARIA + JavaScript

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

29. <ul role="tablist">
<li role="tab">Bahn</li>
<li role="tab">Mietwagen</li>
<li role="tab">Hotel</li>
<li role="tab">Mobilität</li>
</ul>
<!-- Tabpanel Bahn -->
<div role="tabpanel">
…
</div>

30. • tabindex="0" setzen
• Event capturing:
click, focus, keydown, keypress
• Tabpanel einblenden
• Tastatursteuerung:
Pfeiltasten, ctrl + tab,
ctrl + shift + tab
• Event-Bubbling stoppen
• ggf. Screenreader-Buffer
aktualisieren

31. div aria-live="polite"
aria-atomic="true"
aria-relevant="additions text">
Die Seite wurde Ihrem Merkzettel hinzugefügt.

32. http://www.david-chavez.com
a11y ♥ Technik

33. Danke.
twitter: @kliehm
Folien: slideshare.net/kliehm/aria-und-html-5
Videos: flic.kr/p/5EqqLe