SlideShare ist ein Scribd-Unternehmen logo
Accessible Rich Internet Applications (ARIA)‏ A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer http://www.flickr.com/photos/950/2116094803/
Accessible Rich Internet Applications. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Accessible Rich Internet Applications. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Wo bin ich? ,[object Object],[object Object]
Die Lösung:  tabindex < h1   tabindex = &quot;0&quot;> Chris Heilmann < /h1 >
tabindex  revisited.
Was ist das? ,[object Object]
Semantischer Zuckerguss ,[object Object]
Semantischer Zuckerguss ,[object Object],[object Object],[object Object]
Überprüfung der Rolle in der MSAA
Rollentypen ,[object Object],[object Object],[object Object],[object Object],[object Object]
Semantischer Zuckerguss < h1   tabindex = &quot;0&quot;  role = &quot;textfield&quot;> Chris Heilmann </ h1 > < ul   role = &quot;navigation&quot;>  […]  </ ul > < img   src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot;  role = &quot;checkbox&quot; />
Semantischer Zuckerguss role = &quot;dialog&quot;
Semantischer Zuckerguss role = &quot;dialog&quot;
Welchen Zustand hat dieses Element? < img   src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot;  role = &quot;checkbox&quot; />
ARIA States and Properties. < img   src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot;  role = &quot;checkbox&quot; aria-checked = &quot;true&quot; /> < input  type = &quot;text&quot;  name = &quot;email&quot; aria-required = &quot;true&quot; /> < div   role = &quot;wairole:button&quot; aria-controls = &quot;price&quot;> Change sort order </ div > < h2   id = &quot;price&quot;  aria-sort = &quot;descending&quot;> price </ h2 >
ARIA  labelled-by  und  described-by . < label  for = &quot;shutdown-minutes&quot;  id = &quot;sd-label&quot;> Herunterfahren nach </ label >  < input   type = &quot;text&quot;  name = &quot;shutdown“ id = &quot;shutdown-minutes&quot;  value = &quot;&quot; aria-labelled-by = &quot;sd-label sd-unit&quot; aria-described-by = &quot;sd-description&quot; /> < span  id = &quot;sd-unit&quot;> Minuten </ span >
Live Regions: Ajax Support < div   role = &quot;status&quot;  aria-live = &quot;polite&quot;> Nachname ist erforderlich </ div >
Implementierung < ?xml   version = &quot;1.0&quot; ? > < !DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML+ARIA 1.0//EN&quot; &quot;http://www.w3.org/MarkUp/DTD/xhtml-aria-1.dtd&quot;> < html   xmlns = &quot; http://www.w3.org/1999/xhtml &quot; xml:lang = &quot;en&quot;> […] </ html >
Beispiele http://www.flickr.com/photos/adactio/89778576/
Erforderliches Eingabefeld < input  type = &quot;text&quot;  name = &quot;name-family&quot; aria-required = &quot;true&quot;  value = &quot;&quot; />
Fehler im Eingabefeld < input  type = &quot;text&quot;  name = &quot;email&quot; aria-required = &quot;true&quot;  aria-invalid = &quot;true&quot;  value = &quot;foo bar&quot; />
Reiternavigation / Registerkarte < ul   role = &quot;tablist&quot;> < li   role = &quot;tab&quot;  id = &quot;tab-1&quot;  aria-controls = &quot;panel-1&quot;> Aktuelles </ li > < li   role = &quot;tab&quot;> Projekte </ li > < li   role = &quot;tab&quot;> Ansprechpartner </ li > < li   role = &quot;tab&quot;> Institute </ li > </ ul > < div   role = &quot;tabpanel&quot;  id = &quot;panel-1&quot;> […] </ div >
Reiternavigation / Registerkarte mit Link als Fallback ohne JavaScript < ul   role = &quot;tablist&quot;> < li   role = &quot;presentation&quot;> < a   href = &quot;#aktuelles&quot;  role = &quot;tab&quot; id = &quot;tab-1&quot;  aria-controls = &quot;panel-1&quot;> Aktuelles   </ a >  </ li > […] </ ul >
JavaScript für Reiternavigation / Registerkarte. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript für Reiternavigation / Registerkarte. ,[object Object],[object Object],[object Object],[object Object],[object Object]
Fortschrittbalken < div  role = &quot;progressbar&quot;  aria-valuenow = &quot;0&quot;  aria-valuemin = &quot;0&quot;  aria-valuemax = &quot;50&quot; />
Schieberegler
Menübaum
Links ,[object Object],[object Object],[object Object],[object Object],[object Object]
Besten Dank für Ihre Aufmerksamkeit. martin.kliehm (at) namics.com http://www.flickr.com/photos/delay_tactics/207364039/

Weitere ähnliche Inhalte

Ähnlich wie ARIA

Mobile Web Development from Scratch
Mobile Web Development from ScratchMobile Web Development from Scratch
Mobile Web Development from Scratch
NokiaAppForum
 
Die JSTL Tag-Library
Die JSTL Tag-LibraryDie JSTL Tag-Library
Die JSTL Tag-Librarytutego
 
Xhtml Coding (nicht nur für Bibliotheken)
Xhtml Coding (nicht nur für Bibliotheken)Xhtml Coding (nicht nur für Bibliotheken)
Xhtml Coding (nicht nur für Bibliotheken)
Luka Peters
 
Atom Publishing Protocol
Atom Publishing ProtocolAtom Publishing Protocol
Atom Publishing Protocol
Richard Metzler
 
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
openForce Information Technology GesmbH
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
Andreas Schiweck
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
Blogwerk AG
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
Stephan Schmidt
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
Nico Steiner
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
HTML5
HTML5HTML5
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
wien.at Relaunch 2010
wien.at Relaunch 2010wien.at Relaunch 2010
wien.at Relaunch 2010
Thomas Jöchler
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Sven Haiges
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
Jürg Stuker
 
2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML
Steffen Schloenvoigt
 
Einführung in WAI-ARIA
Einführung in WAI-ARIAEinführung in WAI-ARIA
Einführung in WAI-ARIA
Stefan Walter
 

Ähnlich wie ARIA (20)

Mobile Web Development from Scratch
Mobile Web Development from ScratchMobile Web Development from Scratch
Mobile Web Development from Scratch
 
Die JSTL Tag-Library
Die JSTL Tag-LibraryDie JSTL Tag-Library
Die JSTL Tag-Library
 
Xhtml Coding (nicht nur für Bibliotheken)
Xhtml Coding (nicht nur für Bibliotheken)Xhtml Coding (nicht nur für Bibliotheken)
Xhtml Coding (nicht nur für Bibliotheken)
 
Atom Publishing Protocol
Atom Publishing ProtocolAtom Publishing Protocol
Atom Publishing Protocol
 
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
HTML5
HTML5HTML5
HTML5
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
wien.at Relaunch 2010
wien.at Relaunch 2010wien.at Relaunch 2010
wien.at Relaunch 2010
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
 
2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML
 
Einführung in WAI-ARIA
Einführung in WAI-ARIAEinführung in WAI-ARIA
Einführung in WAI-ARIA
 

Mehr von Martin Kliehm

Open City Data & Open Culture Data
Open City Data & Open Culture DataOpen City Data & Open Culture Data
Open City Data & Open Culture Data
Martin Kliehm
 
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion FrankfurtKommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Martin Kliehm
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
Martin Kliehm
 
P2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting MotivationP2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting Motivation
Martin Kliehm
 
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten FlammenwerfernWebmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Martin Kliehm
 
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Martin Kliehm
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
Martin Kliehm
 
ARIA und HTML 5
ARIA und HTML 5ARIA und HTML 5
ARIA und HTML 5
Martin Kliehm
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
Martin Kliehm
 

Mehr von Martin Kliehm (10)

Open City Data & Open Culture Data
Open City Data & Open Culture DataOpen City Data & Open Culture Data
Open City Data & Open Culture Data
 
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion FrankfurtKommunale Arbeit der ELF Piraten Fraktion Frankfurt
Kommunale Arbeit der ELF Piraten Fraktion Frankfurt
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
 
P2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting MotivationP2PU Web Accessibility Lesson 1: Setting Motivation
P2PU Web Accessibility Lesson 1: Setting Motivation
 
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten FlammenwerfernWebmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
Webmontag Frankfurt: Jugendliche mit selbstgebauten Flammenwerfern
 
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.
 
Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.Performance. Webmontag. Frankfurt.
Performance. Webmontag. Frankfurt.
 
ARIA und HTML 5
ARIA und HTML 5ARIA und HTML 5
ARIA und HTML 5
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
 

ARIA

  • 1. Accessible Rich Internet Applications (ARIA)‏ A-Tag, Wien, 21. November 2008 Martin Kliehm, Senior Frontend Engineer http://www.flickr.com/photos/950/2116094803/
  • 2.
  • 3.
  • 4.
  • 5. Die Lösung: tabindex < h1 tabindex = &quot;0&quot;> Chris Heilmann < /h1 >
  • 7.
  • 8.
  • 9.
  • 10. Überprüfung der Rolle in der MSAA
  • 11.
  • 12. Semantischer Zuckerguss < h1 tabindex = &quot;0&quot; role = &quot;textfield&quot;> Chris Heilmann </ h1 > < ul role = &quot;navigation&quot;> […] </ ul > < img src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot; role = &quot;checkbox&quot; />
  • 13. Semantischer Zuckerguss role = &quot;dialog&quot;
  • 14. Semantischer Zuckerguss role = &quot;dialog&quot;
  • 15. Welchen Zustand hat dieses Element? < img src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot; role = &quot;checkbox&quot; />
  • 16. ARIA States and Properties. < img src = &quot;checkbox-with-rounded-corners-and-dropshadow.gif&quot; role = &quot;checkbox&quot; aria-checked = &quot;true&quot; /> < input type = &quot;text&quot; name = &quot;email&quot; aria-required = &quot;true&quot; /> < div role = &quot;wairole:button&quot; aria-controls = &quot;price&quot;> Change sort order </ div > < h2 id = &quot;price&quot; aria-sort = &quot;descending&quot;> price </ h2 >
  • 17. ARIA labelled-by und described-by . < label for = &quot;shutdown-minutes&quot; id = &quot;sd-label&quot;> Herunterfahren nach </ label > < input type = &quot;text&quot; name = &quot;shutdown“ id = &quot;shutdown-minutes&quot; value = &quot;&quot; aria-labelled-by = &quot;sd-label sd-unit&quot; aria-described-by = &quot;sd-description&quot; /> < span id = &quot;sd-unit&quot;> Minuten </ span >
  • 18. Live Regions: Ajax Support < div role = &quot;status&quot; aria-live = &quot;polite&quot;> Nachname ist erforderlich </ div >
  • 19. Implementierung < ?xml version = &quot;1.0&quot; ? > < !DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML+ARIA 1.0//EN&quot; &quot;http://www.w3.org/MarkUp/DTD/xhtml-aria-1.dtd&quot;> < html xmlns = &quot; http://www.w3.org/1999/xhtml &quot; xml:lang = &quot;en&quot;> […] </ html >
  • 21. Erforderliches Eingabefeld < input type = &quot;text&quot; name = &quot;name-family&quot; aria-required = &quot;true&quot; value = &quot;&quot; />
  • 22. Fehler im Eingabefeld < input type = &quot;text&quot; name = &quot;email&quot; aria-required = &quot;true&quot; aria-invalid = &quot;true&quot; value = &quot;foo bar&quot; />
  • 23. Reiternavigation / Registerkarte < ul role = &quot;tablist&quot;> < li role = &quot;tab&quot; id = &quot;tab-1&quot; aria-controls = &quot;panel-1&quot;> Aktuelles </ li > < li role = &quot;tab&quot;> Projekte </ li > < li role = &quot;tab&quot;> Ansprechpartner </ li > < li role = &quot;tab&quot;> Institute </ li > </ ul > < div role = &quot;tabpanel&quot; id = &quot;panel-1&quot;> […] </ div >
  • 24. Reiternavigation / Registerkarte mit Link als Fallback ohne JavaScript < ul role = &quot;tablist&quot;> < li role = &quot;presentation&quot;> < a href = &quot;#aktuelles&quot; role = &quot;tab&quot; id = &quot;tab-1&quot; aria-controls = &quot;panel-1&quot;> Aktuelles </ a > </ li > […] </ ul >
  • 25.
  • 26.
  • 27. Fortschrittbalken < div role = &quot;progressbar&quot; aria-valuenow = &quot;0&quot; aria-valuemin = &quot;0&quot; aria-valuemax = &quot;50&quot; />
  • 30.
  • 31. Besten Dank für Ihre Aufmerksamkeit. martin.kliehm (at) namics.com http://www.flickr.com/photos/delay_tactics/207364039/