ARIA und HTML 5

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/

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

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;

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>  <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

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

ARIA und HTML 5

by Martin Kliehm

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 473

Statistics

ARIA und HTML 5 Presentation Transcript