• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ARIA und HTML 5
 

ARIA und HTML 5

on

  • 8,251 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,251
Views on SlideShare
7,723
Embed Views
528

Actions

Likes
6
Downloads
19
Comments
1

8 Embeds 528

http://blog.namics.com 436
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

11 of 1 previous next

  • 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