ARIA und HTML5
                            in freier Wildbahn




Martin Kliehm. @kliehm
Senior Frontend Engineer.
Namics....
Oder doch
eher so?




            http://www.flickr.com/photos/angelinawb/2086914195/
Projekte von Namics
Accessible Rich
Internet Applications
(ARIA)
Zuerst
die niedrig
hängenden
Früchte
              http://www.flickr.com/photos/pgasston/1372139756/
<input type="text"
    aria-required="true" />
<input type="text"
    aria-required="true"
    aria-invalid="true" />
http://www.flickr.com/photos/lwr/2057056544/
http://webaim.org/blog/spam_free_accessible_forms/
<ul role="menu navigation">
  <li role="menuitem">
    <a href="…">Über Fraunhofer</a>
  </li>
</ul>
<a
  role="button"
  aria-controls="nav-direct-third"
  tabindex="0"
  title="Untermenü">
    Schnellzugriff
</a>
<ul id="...
HTML 5: Canvas
<canvas />
CSS 3
border-radius: 16px 16px 0 0;
-moz-border-radius: 16px 16px 0 0;
/* Webkit does suppport no more than
two values for borde...
<!--[if vml]>
<script type="text/javascript">
  var isVML = true;
</script>
<![endif]-->

v:roundrect {
  behavior: url(#d...
HTML 5: Geolocation
if ( navigator.geolocation ) {
  navigator.geolocation.getCurrentPosition(
     SBS.foundLocation
  );
}
ARIA + JavaScript
http://www.w3.org/TR/wai-aria-practices/
<ul role="tablist">
  <li role="tab">Bahn</li>
  <li role="tab">Mietwagen</li>
  <li role="tab">Hotel</li>
  <li role="tab...
•   tabindex="0" setzen
•   Event capturing:
    click, focus, keydown, keypress
•   Tabpanel einblenden
•   Tastatursteue...
div aria-live="polite"
     aria-atomic="true"
     aria-relevant="additions text">


      Die Seite wurde Ihrem Merkzett...
http://www.david-chavez.com




a11y ♥ Technik
Danke.




twitter: @kliehm
Folien: slideshare.net/kliehm/aria-und-html-5
Videos: flic.kr/p/5EqqLe
ARIA und HTML 5
ARIA und HTML 5
ARIA und HTML 5
ARIA und HTML 5
ARIA und HTML 5
ARIA und HTML 5
ARIA und HTML 5
ARIA und HTML 5
Upcoming SlideShare
Loading in...5
×

ARIA und HTML 5

6,273

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,273
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
22
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×