ARIA und HTML 5

6,605 views
6,472 views

Published on

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

Published in: Technology, Design
1 Comment
6 Likes
Statistics
Notes
  • Diese Präsentation hat Vortragsnotizen, die die einzelnen Folien erklären. Entweder zeigt sie Slideshare irgendwann an, aber sie sind auch in der downloadbaren Powerpoint-Datei und im Blogbeitrag auf Namics enthalten: http://accessibility.namics.com/2009/aria-und-html-5.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,605
On SlideShare
0
From Embeds
0
Number of Embeds
557
Actions
Shares
0
Downloads
22
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

ARIA und HTML 5

  1. 1. ARIA und HTML5 in freier Wildbahn Martin Kliehm. @kliehm Senior Frontend Engineer. Namics. http://www.flickr.com/photos/73594239@N00/8937968/
  2. 2. Oder doch eher so? http://www.flickr.com/photos/angelinawb/2086914195/
  3. 3. Projekte von Namics
  4. 4. Accessible Rich Internet Applications (ARIA)
  5. 5. Zuerst die niedrig hängenden Früchte http://www.flickr.com/photos/pgasston/1372139756/
  6. 6. <input type="text" aria-required="true" />
  7. 7. <input type="text" aria-required="true" aria-invalid="true" />
  8. 8. http://www.flickr.com/photos/lwr/2057056544/
  9. 9. http://webaim.org/blog/spam_free_accessible_forms/
  10. 10. <ul role="menu navigation"> <li role="menuitem"> <a href="…">Über Fraunhofer</a> </li> </ul>
  11. 11. <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>
  12. 12. HTML 5: Canvas
  13. 13. <canvas />
  14. 14. CSS 3
  15. 15. 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;
  16. 16. <!--[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; }
  17. 17. HTML 5: Geolocation
  18. 18. if ( navigator.geolocation ) { navigator.geolocation.getCurrentPosition( SBS.foundLocation ); }
  19. 19. ARIA + JavaScript
  20. 20. http://www.w3.org/TR/wai-aria-practices/
  21. 21. <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>
  22. 22. • 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
  23. 23. div aria-live="polite" aria-atomic="true" aria-relevant="additions text"> Die Seite wurde Ihrem Merkzettel hinzugefügt.
  24. 24. http://www.david-chavez.com a11y ♥ Technik
  25. 25. Danke. twitter: @kliehm Folien: slideshare.net/kliehm/aria-und-html-5 Videos: flic.kr/p/5EqqLe

×