Accessible Javascript mit Frameworks - Best of Accessibility 2008

3,163 views
3,002 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,163
On SlideShare
0
From Embeds
0
Number of Embeds
128
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide


































































  • 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

    ×