SlideShare ist ein Scribd-Unternehmen logo
Accessible Javascript
                            mit Hilfe von Frameworks
                                  Dirk Ginader
                                 http://ginader.de




Friday, March 6, 2009
Was mach Javascript
                            “Accessible”?

                        • Der Inhalt der Seite ist mit Javascript
                          zumindest genauso zugänglich wie ohne
                        • Nutzern ohne Javascript wird nichts
                          vorenthalten




Friday, March 6, 2009
Ein Spiel hat 90
                                 Minuten...
                        • Einführung
                          Wie geht das überhaupt?
                        • Teamwork
                          Wir machen Javascript barrierefrei!
                        • Q&A
                          Noch Fragen?



Friday, March 6, 2009
Ohne barrierefreies
                    Markup gibt es kein
                  barrierefreies Javascript


Friday, March 6, 2009
• eine Webseite muss erstmal ohne Javascript
                          funktionieren

                        • wird für jedes Element der Seite wirklich
                          das richtige HTML Pendant benutzt?

                        • ist die Seite ohne CSS logisch, verständlich
                          und bedienbar?




Friday, March 6, 2009
CSS macht nicht nur
                              schön


Friday, March 6, 2009
• falsch angewendet kann CSS die Seite
                          unzugänglich machen lange bevor Javascript
                          dazukommt

                        • display:none und visibility:hidden sind nicht
                          generell böse aber leider häufig

                        • versteckte Elemente werden bei :hover
                          angezeigt - schön! Aber was passiert ohne
                          Maus?

                        • CSS ist für Design - nicht für Interaktion!
Friday, March 6, 2009
Interaktion wird auf
                   dem Server verarbeitet


Friday, March 6, 2009
• Alles was man im Endeffekt mit Javascript
                          erreichen will muss man erstmal ohne
                          lösen

                        • Ein Neuladen der Seite mag nicht mehr
                          cool sein aber er ist genauso notwendig
                          wie vor 10 Jahren




Friday, March 6, 2009
Javascript als
                        Sahnehäubchen
                           obendrauf


Friday, March 6, 2009
• Javascript ist eine weitere Ebene über
                          HTML und CSS

                        • Vorhandene Interaktionselemente werden
                          mit neuen Funktionen belegt

                        • neue Interaktionselemente, die nur mit
                          Javascript verfügbar sind, müssen mit
                          Javascript erzeugt werden



Friday, March 6, 2009
noch ein Layer:
                     anderes CSS wenn
                  Javascript vorhanden ist


Friday, March 6, 2009
• Javascript ist da! Lasst uns die Website
                            einmal komplett umgraben!

                        • Besser man überlässt das Verändern des
                            Design dem der sich damit auskennt: CSS

                        • Ein einfacher Einzeiler im head tut den ”Job:
                          document.documentElement.className += js”;

                        •   im CSS kann dann mit .js{} Javascript abhängiges
                            CSS geschrieben werden.


Friday, March 6, 2009
Screenreader können
                  doch gar kein Javascript


Friday, March 6, 2009
• glaubt das wirklich noch jemand?
                        • Die meisten Screenreader können
                          inzwischen sogar sehr gut mit Javascript
                          umgehen!

                        • Sie wissen nur leider nicht immer was
                          gerade vor sich geht




Friday, March 6, 2009
• Screenreader wissen lassen was passiert
                        • ein logischer Benutzerablauf der auch gut
                          ohne Screenreader testbar ist

                        • focus() auf das richtige Element
                        • Bei DOM Updates kann es notwendig
                          werden den Screenreader Virtual Buffer zu
                          einem Rebuild zu zwingen (verstecktes
                          input Feld updaten)


Friday, March 6, 2009
Accessibility
                             !=
                        Screenreader


Friday, March 6, 2009
• Ist die Webseite ohne Maus benutzbar?
                        • Die Tabulatortaste ist eines der wichtigsten
                          Navigationselemente

                        • reagieren Elemente auf :hover und
                          auf :focus ?




Friday, March 6, 2009
• was passiert wenn die Seit skaliert wird?
                        • Bildschirmlupen zeigen immer nur einen
                          kleinen Ausschnitt des Bildschirms

                        • versteht jeder was gerade passiert?


Friday, March 6, 2009
Wie können uns
                        Javascript Frameworks
                             dabei helfen?


Friday, March 6, 2009
• Javascript Crossbrowser Gesäßschmerzen
                          reduzieren:
                          Browserspezifische Funktionen
                          vereinheitlichen

                        • Das richtige Timing ist entscheidend:
                          onDOMReady

                        • Das Rad nicht jeden Tag neu erfinden:
                          Fertige Komponenten vereinfachen


Friday, March 6, 2009
• Die Komponenten der grossen
                          Frameworks sind grösstenteils sehr
                          ausgiebig auf Funktionalität und
                          Zugänglichkeit getestet

                        • Screenreadertests machen nur Sinn mit
                          einem “echten” Screenreader User




Friday, March 6, 2009
Beispiel



Friday, March 6, 2009
ohne Javascript
Friday, March 6, 2009
mit Javascript
Friday, March 6, 2009
mit Javascript
Friday, March 6, 2009
mit Javascript
Friday, March 6, 2009
mit Javascript
Friday, March 6, 2009
http://de.tv.yahoo.com/

Friday, March 6, 2009
Reduce to the Max
Friday, March 6, 2009
Weitere Beispiele

                        • http://code.google.com/p/google-axsjax/
                        • http://scriptingenabled.org/
                        • http://icant.co.uk/easy-youtube


Friday, March 6, 2009
Accessibility nicht
                        zuende zu denken ist
                        genauso schlimm wie
                         gar nicht daran zu
                               denken
Friday, March 6, 2009
Friday, March 6, 2009

Weitere ähnliche Inhalte

Was ist angesagt?

Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
Monika Thon-Soun
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Jens Grochtdreis
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Jens Grochtdreis
 
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPConCross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Christian Heilmann
 
Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008
Christian Heilmann
 
Joomla! in der Profiliga - eine Bestpractice-Sammlung
Joomla! in der Profiliga - eine Bestpractice-SammlungJoomla! in der Profiliga - eine Bestpractice-Sammlung
Joomla! in der Profiliga - eine Bestpractice-Sammlung
David Jardin
 
Webseiten aktualisieren – regelmäßigkeit ist das geheimnis
Webseiten aktualisieren – regelmäßigkeit ist das geheimnisWebseiten aktualisieren – regelmäßigkeit ist das geheimnis
Webseiten aktualisieren – regelmäßigkeit ist das geheimnis
John Morakal
 
Internet optimal nutzen
Internet optimal nutzenInternet optimal nutzen
Internet optimal nutzen
aquarana
 
Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014
Rolf Mistelbacher
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototyping
Hausammann
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
Jens Grochtdreis
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
Jens Grochtdreis
 

Was ist angesagt? (13)

Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPConCross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
Cross Platform ist ein alter Hut, Zeit ihn abzustauben - XPCon
 
Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008Befreite Barrierefreiheit - A-Tag Wien 2008
Befreite Barrierefreiheit - A-Tag Wien 2008
 
Joomla! in der Profiliga - eine Bestpractice-Sammlung
Joomla! in der Profiliga - eine Bestpractice-SammlungJoomla! in der Profiliga - eine Bestpractice-Sammlung
Joomla! in der Profiliga - eine Bestpractice-Sammlung
 
Webseiten aktualisieren – regelmäßigkeit ist das geheimnis
Webseiten aktualisieren – regelmäßigkeit ist das geheimnisWebseiten aktualisieren – regelmäßigkeit ist das geheimnis
Webseiten aktualisieren – regelmäßigkeit ist das geheimnis
 
Internet optimal nutzen
Internet optimal nutzenInternet optimal nutzen
Internet optimal nutzen
 
Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototyping
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
 

Andere mochten auch

9e Soirée des Pros du tourisme 12/11/15 - Observatoire Anjou tourisme
 9e Soirée des Pros du tourisme 12/11/15 - Observatoire Anjou tourisme 9e Soirée des Pros du tourisme 12/11/15 - Observatoire Anjou tourisme
9e Soirée des Pros du tourisme 12/11/15 - Observatoire Anjou tourisme
Anjou tourisme
 
As. extensión forestal final
As. extensión forestal finalAs. extensión forestal final
As. extensión forestal final
Santiago JM Del Pozo Donoso
 
Cesar chavezamy
Cesar chavezamyCesar chavezamy
Cesar chavezamy
courtneylj2010
 
Lettre omnium aout 2011
Lettre omnium aout 2011Lettre omnium aout 2011
Lettre omnium aout 2011
sti1966
 
Proyecto de ley 36 de 2010
Proyecto de ley 36 de 2010Proyecto de ley 36 de 2010
Proyecto de ley 36 de 2010
Daniel Barona
 
Comercialización
ComercializaciónComercialización
Comercialización
Santiago JM Del Pozo Donoso
 
Vocaciones productivas regionales
Vocaciones productivas regionalesVocaciones productivas regionales
Vocaciones productivas regionales
Santiago JM Del Pozo Donoso
 
Proyecto de vida adriana ocaña
Proyecto de vida adriana ocañaProyecto de vida adriana ocaña
Proyecto de vida adriana ocaña
adriana20200
 
Santa maría de la esperanza
Santa maría de la esperanzaSanta maría de la esperanza
Santa maría de la esperanza
marsegundo
 
Fokus Scommerce
Fokus ScommerceFokus Scommerce
Fokus Scommerce
ecomplexx
 
Principios de terapeutica
Principios de terapeuticaPrincipios de terapeutica
Principios de terapeutica
Gaby Mani
 
Normativa para la operación del transporte de
Normativa para la operación del transporte deNormativa para la operación del transporte de
Normativa para la operación del transporte de
delmyjo
 
Jose luis
Jose luisJose luis
Jose luis
JVELANDIA
 
CONTAMINACION AUDITIVA
CONTAMINACION AUDITIVACONTAMINACION AUDITIVA
CONTAMINACION AUDITIVA
Tanniiaeliz
 
Schicksal und Karma
Schicksal und Karma Schicksal und Karma
Schicksal und Karma
SSRF Inc.
 
Esquematismo
EsquematismoEsquematismo
Esquematismo
Cynthia Blaconá
 
Cartilla de jairo miguel henriquez
Cartilla de  jairo  miguel  henriquezCartilla de  jairo  miguel  henriquez
Cartilla de jairo miguel henriquez
Edgar Saza
 
Informe Programa Nacional de Transferencia Técnica Forestal año 2002
Informe Programa Nacional de Transferencia Técnica Forestal año 2002Informe Programa Nacional de Transferencia Técnica Forestal año 2002
Informe Programa Nacional de Transferencia Técnica Forestal año 2002
Santiago JM Del Pozo Donoso
 

Andere mochten auch (20)

9e Soirée des Pros du tourisme 12/11/15 - Observatoire Anjou tourisme
 9e Soirée des Pros du tourisme 12/11/15 - Observatoire Anjou tourisme 9e Soirée des Pros du tourisme 12/11/15 - Observatoire Anjou tourisme
9e Soirée des Pros du tourisme 12/11/15 - Observatoire Anjou tourisme
 
As. extensión forestal final
As. extensión forestal finalAs. extensión forestal final
As. extensión forestal final
 
Cesar chavezamy
Cesar chavezamyCesar chavezamy
Cesar chavezamy
 
Lettre omnium aout 2011
Lettre omnium aout 2011Lettre omnium aout 2011
Lettre omnium aout 2011
 
Proyecto de ley 36 de 2010
Proyecto de ley 36 de 2010Proyecto de ley 36 de 2010
Proyecto de ley 36 de 2010
 
Comercialización
ComercializaciónComercialización
Comercialización
 
Vocaciones productivas regionales
Vocaciones productivas regionalesVocaciones productivas regionales
Vocaciones productivas regionales
 
Brésil
BrésilBrésil
Brésil
 
Proyecto de vida adriana ocaña
Proyecto de vida adriana ocañaProyecto de vida adriana ocaña
Proyecto de vida adriana ocaña
 
Mailjet
MailjetMailjet
Mailjet
 
Santa maría de la esperanza
Santa maría de la esperanzaSanta maría de la esperanza
Santa maría de la esperanza
 
Fokus Scommerce
Fokus ScommerceFokus Scommerce
Fokus Scommerce
 
Principios de terapeutica
Principios de terapeuticaPrincipios de terapeutica
Principios de terapeutica
 
Normativa para la operación del transporte de
Normativa para la operación del transporte deNormativa para la operación del transporte de
Normativa para la operación del transporte de
 
Jose luis
Jose luisJose luis
Jose luis
 
CONTAMINACION AUDITIVA
CONTAMINACION AUDITIVACONTAMINACION AUDITIVA
CONTAMINACION AUDITIVA
 
Schicksal und Karma
Schicksal und Karma Schicksal und Karma
Schicksal und Karma
 
Esquematismo
EsquematismoEsquematismo
Esquematismo
 
Cartilla de jairo miguel henriquez
Cartilla de  jairo  miguel  henriquezCartilla de  jairo  miguel  henriquez
Cartilla de jairo miguel henriquez
 
Informe Programa Nacional de Transferencia Técnica Forestal año 2002
Informe Programa Nacional de Transferencia Técnica Forestal año 2002Informe Programa Nacional de Transferencia Técnica Forestal año 2002
Informe Programa Nacional de Transferencia Técnica Forestal año 2002
 

Mehr von Dirk Ginader

Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
Dirk Ginader
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
Dirk Ginader
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Dirk Ginader
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
Dirk Ginader
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
Dirk Ginader
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
Dirk Ginader
 
The accessibility features of Yahoo! Finance
The accessibility features of Yahoo! FinanceThe accessibility features of Yahoo! Finance
The accessibility features of Yahoo! Finance
Dirk Ginader
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
Dirk Ginader
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp II
Dirk Ginader
 
Das Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und PipesDas Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und Pipes
Dirk Ginader
 
Die 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web EntwicklungDie 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web Entwicklung
Dirk Ginader
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
Dirk Ginader
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
Dirk Ginader
 
Avoiding common Accessibility mistakes
Avoiding common Accessibility mistakesAvoiding common Accessibility mistakes
Avoiding common Accessibility mistakes
Dirk Ginader
 
Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5
Dirk Ginader
 
Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2
Dirk Ginader
 

Mehr von Dirk Ginader (18)

Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
 
The accessibility features of Yahoo! Finance
The accessibility features of Yahoo! FinanceThe accessibility features of Yahoo! Finance
The accessibility features of Yahoo! Finance
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp II
 
Das Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und PipesDas Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und Pipes
 
Die 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web EntwicklungDie 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web Entwicklung
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
 
Avoiding common Accessibility mistakes
Avoiding common Accessibility mistakesAvoiding common Accessibility mistakes
Avoiding common Accessibility mistakes
 
Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5
 
Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2
 

Accessible Javascript mit Frameworks - Best of Accessibility 2008

  • 1. Accessible Javascript mit Hilfe von Frameworks Dirk Ginader http://ginader.de Friday, March 6, 2009
  • 2. Was mach Javascript “Accessible”? • Der Inhalt der Seite ist mit Javascript zumindest genauso zugänglich wie ohne • Nutzern ohne Javascript wird nichts vorenthalten Friday, March 6, 2009
  • 3. Ein Spiel hat 90 Minuten... • Einführung Wie geht das überhaupt? • Teamwork Wir machen Javascript barrierefrei! • Q&A Noch Fragen? Friday, March 6, 2009
  • 4. Ohne barrierefreies Markup gibt es kein barrierefreies Javascript Friday, March 6, 2009
  • 5. • eine Webseite muss erstmal ohne Javascript funktionieren • wird für jedes Element der Seite wirklich das richtige HTML Pendant benutzt? • ist die Seite ohne CSS logisch, verständlich und bedienbar? Friday, March 6, 2009
  • 6. CSS macht nicht nur schön Friday, March 6, 2009
  • 7. • falsch angewendet kann CSS die Seite unzugänglich machen lange bevor Javascript dazukommt • display:none und visibility:hidden sind nicht generell böse aber leider häufig • versteckte Elemente werden bei :hover angezeigt - schön! Aber was passiert ohne Maus? • CSS ist für Design - nicht für Interaktion! Friday, March 6, 2009
  • 8. Interaktion wird auf dem Server verarbeitet Friday, March 6, 2009
  • 9. • Alles was man im Endeffekt mit Javascript erreichen will muss man erstmal ohne lösen • Ein Neuladen der Seite mag nicht mehr cool sein aber er ist genauso notwendig wie vor 10 Jahren Friday, March 6, 2009
  • 10. Javascript als Sahnehäubchen obendrauf Friday, March 6, 2009
  • 11. • Javascript ist eine weitere Ebene über HTML und CSS • Vorhandene Interaktionselemente werden mit neuen Funktionen belegt • neue Interaktionselemente, die nur mit Javascript verfügbar sind, müssen mit Javascript erzeugt werden Friday, March 6, 2009
  • 12. noch ein Layer: anderes CSS wenn Javascript vorhanden ist Friday, March 6, 2009
  • 13. • Javascript ist da! Lasst uns die Website einmal komplett umgraben! • Besser man überlässt das Verändern des Design dem der sich damit auskennt: CSS • Ein einfacher Einzeiler im head tut den ”Job: document.documentElement.className += js”; • im CSS kann dann mit .js{} Javascript abhängiges CSS geschrieben werden. Friday, March 6, 2009
  • 14. Screenreader können doch gar kein Javascript Friday, March 6, 2009
  • 15. • glaubt das wirklich noch jemand? • Die meisten Screenreader können inzwischen sogar sehr gut mit Javascript umgehen! • Sie wissen nur leider nicht immer was gerade vor sich geht Friday, March 6, 2009
  • 16. • Screenreader wissen lassen was passiert • ein logischer Benutzerablauf der auch gut ohne Screenreader testbar ist • focus() auf das richtige Element • Bei DOM Updates kann es notwendig werden den Screenreader Virtual Buffer zu einem Rebuild zu zwingen (verstecktes input Feld updaten) Friday, March 6, 2009
  • 17. Accessibility != Screenreader Friday, March 6, 2009
  • 18. • Ist die Webseite ohne Maus benutzbar? • Die Tabulatortaste ist eines der wichtigsten Navigationselemente • reagieren Elemente auf :hover und auf :focus ? Friday, March 6, 2009
  • 19. • was passiert wenn die Seit skaliert wird? • Bildschirmlupen zeigen immer nur einen kleinen Ausschnitt des Bildschirms • versteht jeder was gerade passiert? Friday, March 6, 2009
  • 20. Wie können uns Javascript Frameworks dabei helfen? Friday, March 6, 2009
  • 21. • Javascript Crossbrowser Gesäßschmerzen reduzieren: Browserspezifische Funktionen vereinheitlichen • Das richtige Timing ist entscheidend: onDOMReady • Das Rad nicht jeden Tag neu erfinden: Fertige Komponenten vereinfachen Friday, March 6, 2009
  • 22. • Die Komponenten der grossen Frameworks sind grösstenteils sehr ausgiebig auf Funktionalität und Zugänglichkeit getestet • Screenreadertests machen nur Sinn mit einem “echten” Screenreader User Friday, March 6, 2009
  • 30. Reduce to the Max Friday, March 6, 2009
  • 31. Weitere Beispiele • http://code.google.com/p/google-axsjax/ • http://scriptingenabled.org/ • http://icant.co.uk/easy-youtube Friday, March 6, 2009
  • 32. Accessibility nicht zuende zu denken ist genauso schlimm wie gar nicht daran zu denken Friday, March 6, 2009

Hinweis der Redaktion