Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible Javascript mit Frameworks - Best of Accessibility 2008

3,631 views

Published on

Published in: Technology
  • Be the first to comment

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

×