ARIA und HTML 5
Upcoming SlideShare
Loading in...5
×
 

ARIA und HTML 5

on

  • 8,342 views

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

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

Statistics

Views

Total Views
8,342
Views on SlideShare
7,811
Embed Views
531

Actions

Likes
6
Downloads
19
Comments
1

8 Embeds 531

http://blog.namics.com 439
http://accessibility.namics.com 59
http://www.slideshare.net 10
http://blog.local.namics.com 9
http://blog.wordpressbeta.ch 7
http://lanyrd.com 4
https://blog.namics.com 2
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ARIA und HTML 5 ARIA und HTML 5 Presentation Transcript

  • ARIA und HTML5 in freier Wildbahn Martin Kliehm. @kliehm Senior Frontend Engineer. Namics. http://www.flickr.com/photos/73594239@N00/8937968/
  • 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="nav-direct-third" role="menu navigation" aria-expanded="true"> <li role="menuitem"> <a href="…">Presse / Medien</a> </li> </ul>
  • 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 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;
  • <!--[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; }
  • 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">Mobilität</li> </ul> <!-- Tabpanel Bahn --> <div role="tabpanel"> … </div>
  • • 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
  • div aria-live="polite" aria-atomic="true" aria-relevant="additions text"> Die Seite wurde Ihrem Merkzettel hinzugefügt.
  • http://www.david-chavez.com a11y ♥ Technik
  • Danke. twitter: @kliehm Folien: slideshare.net/kliehm/aria-und-html-5 Videos: flic.kr/p/5EqqLe