Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,808 views

Published on

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

Published in: Technology, Design
  • 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

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

×