ARIA und HTML 5
Download as PPT, PDF
7 likes2,029 views
ARIA und HTML5 in freier Wildbahn. Beispiele von Accessible Rich Internet Applications ins Kundenprojekten.
![<!--[if vml]>
<script type="text/javascript">
var isVML = true;
</script>
<![endif]-->
v:roundrect {
behavior: url(/slideshow/aria-und-html-5/1726566/);
height: 100%;
left: -1px;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}](https://image.slidesharecdn.com/ikt-forum-aria-090715135819-phpapp02/85/ARIA-und-HTML-5-23-320.jpg)
ARIA und HTML 5
- 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/
- 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" />
- 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(/slideshow/aria-und-html-5/1726566/); height: 100%; left: -1px; position: absolute; top: 0; width: 100%; z-index: 0; }
- 26. if ( navigator.geolocation ) { navigator.geolocation.getCurrentPosition( SBS.foundLocation ); }
- 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.
- 33. Danke. twitter: @kliehm Folien: slideshare.net/kliehm/aria-und-html-5 Videos: flic.kr/p/5EqqLe