Accessible Javascript
                            mit Hilfe von Frameworks
                                  Dirk Ginader
...
Was mach Javascript
                            “Accessible”?

                        • Der Inhalt der Seite ist mit Java...
Ein Spiel hat 90
                                 Minuten...
                        • Einführung
                        ...
Ohne barrierefreies
                    Markup gibt es kein
                  barrierefreies Javascript


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

                        • wird für j...
CSS macht nicht nur
                              schön


Friday, March 6, 2009
• falsch angewendet kann CSS die Seite
                          unzugänglich machen lange bevor Javascript
              ...
Interaktion wird auf
                   dem Server verarbeitet


Friday, March 6, 2009
• Alles was man im Endeffekt mit Javascript
                          erreichen will muss man erstmal ohne
               ...
Javascript als
                        Sahnehäubchen
                           obendrauf


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

                        • Vorhandene Inte...
noch ein Layer:
                     anderes CSS wenn
                  Javascript vorhanden ist


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

                        ...
Screenreader können
                  doch gar kein Javascript


Friday, March 6, 2009
• glaubt das wirklich noch jemand?
                        • Die meisten Screenreader können
                          inz...
• Screenreader wissen lassen was passiert
                        • ein logischer Benutzerablauf der auch gut
            ...
Accessibility
                             !=
                        Screenreader


Friday, March 6, 2009
• Ist die Webseite ohne Maus benutzbar?
                        • Die Tabulatortaste ist eines der wichtigsten
           ...
• was passiert wenn die Seit skaliert wird?
                        • Bildschirmlupen zeigen immer nur einen
             ...
Wie können uns
                        Javascript Frameworks
                             dabei helfen?


Friday, March 6,...
• Javascript Crossbrowser Gesäßschmerzen
                          reduzieren:
                          Browserspezifische...
• Die Komponenten der grossen
                          Frameworks sind grösstenteils sehr
                          ausgi...
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://scri...
Accessibility nicht
                        zuende zu denken ist
                        genauso schlimm wie
             ...
Friday, March 6, 2009
Nächste SlideShare
Wird geladen in …5
×

Accessible Javascript mit Frameworks - Best of Accessibility 2008

3.274 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.274
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
129
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie


































































  • Accessible Javascript mit Frameworks - Best of Accessibility 2008

    1. 1. Accessible Javascript mit Hilfe von Frameworks Dirk Ginader http://ginader.de Friday, March 6, 2009
    2. 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. 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. 4. Ohne barrierefreies Markup gibt es kein barrierefreies Javascript Friday, March 6, 2009
    5. 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. 6. CSS macht nicht nur schön Friday, March 6, 2009
    7. 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. 8. Interaktion wird auf dem Server verarbeitet Friday, March 6, 2009
    9. 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. 10. Javascript als Sahnehäubchen obendrauf Friday, March 6, 2009
    11. 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. 12. noch ein Layer: anderes CSS wenn Javascript vorhanden ist Friday, March 6, 2009
    13. 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. 14. Screenreader können doch gar kein Javascript Friday, March 6, 2009
    15. 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. 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. 17. Accessibility != Screenreader Friday, March 6, 2009
    18. 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. 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. 20. Wie können uns Javascript Frameworks dabei helfen? Friday, March 6, 2009
    21. 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. 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
    23. 23. Beispiel Friday, March 6, 2009
    24. 24. ohne Javascript Friday, March 6, 2009
    25. 25. mit Javascript Friday, March 6, 2009
    26. 26. mit Javascript Friday, March 6, 2009
    27. 27. mit Javascript Friday, March 6, 2009
    28. 28. mit Javascript Friday, March 6, 2009
    29. 29. http://de.tv.yahoo.com/ Friday, March 6, 2009
    30. 30. Reduce to the Max Friday, March 6, 2009
    31. 31. Weitere Beispiele • http://code.google.com/p/google-axsjax/ • http://scriptingenabled.org/ • http://icant.co.uk/easy-youtube Friday, March 6, 2009
    32. 32. Accessibility nicht zuende zu denken ist genauso schlimm wie gar nicht daran zu denken Friday, March 6, 2009
    33. 33. Friday, March 6, 2009

    ×