Worst and Best Practices in der Barrierefreiheit

1.505 Aufrufe

Veröffentlicht am

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.505
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
10
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Worst and Best Practices in der Barrierefreiheit

  1. 1. Best and Worst Practice In der Barrierefreiheit Kerstin Probiesch
  2. 2. Kurz die Vita <ul><li>Freie Beraterin </li></ul><ul><li>Invited Expert – W3C – Evaluation and Methodology Task Force (EvalTF) </li></ul><ul><li>Fach(buch)autorin </li></ul><ul><li>Webkrauts </li></ul><ul><li>Special Interest: Barrierefreiheit von Social Media und Open Access </li></ul>
  3. 3. WAS BARRIEREFREIHEIT NICHT IST
  4. 4. Layout für „Normale“
  5. 5. Und das für „die anderen“?
  6. 6. Textversion Hörzu – Finde den Fehler
  7. 7. Oft nur der schöne Schein
  8. 8. WCAG 2.0 – AA konform?
  9. 9. Grafiken ohne alt-Attribute
  10. 10. Grafiken über CSS / Transparenz – Problematisch bei eigenen Farbeinstellungen
  11. 11. Was bleibt? Nicht mal A-konform
  12. 12. MEHRFACHKENNZEICHNUNG <ul><li>Nun aber: </li></ul>
  13. 13. Informationen nicht nur über Farbe oder sensorische Eigenschaften vermitteln <ul><li>Nicht nur so: </li></ul><ul><ul><li>„ Klicken Sie den grünen Button“ </li></ul></ul><ul><ul><li>„ Fehlermeldungen werden in rot“ </li></ul></ul><ul><ul><li>„ Pflichtfelder sind orange hinterlegt“ </li></ul></ul><ul><ul><li>„ Links zum Artikel finden Sie rechts“ </li></ul></ul><ul><ul><li>„ Weiterführende Informationen finden Sie im blauen hinterlegen Kasten“ </li></ul></ul><ul><ul><li>Aktuelle Rubriken und Seiten nur über Farbe vermitteln </li></ul></ul>
  14. 14. Individuelle Farbwahrnehmung z.B. Farbfehlsichtigkeit
  15. 15. Beispiel: Benutzerdefinierte Farbeinstellungen
  16. 16. Problem: Informationsvermittlung nur über Farbe allein. Zudem: schlechter Kontrast
  17. 17. Benutzerdefinierte Farbeinstellungen – „Green Tags“ nicht mehr ermittelbar
  18. 18. Ansicht ohne CSS
  19. 19. Zusammenspiel von Text und Struktur
  20. 20. Mehrfachkennzeichnung in Navigationsbereichen
  21. 21. auch mit benutzerdefinierten Farbeinstellungen sichtbar
  22. 22. „ Versteckte“ Texte für Screenreadernutzer
  23. 23. Best Practice: Mehrfachkennzeichnung in Formularen (Stadt Wien)
  24. 24. TASTATURBEDIENBARKEIT
  25. 25. Aber nicht so:
  26. 26. Und nicht so: Vorschau nur für Mausbenutzer
  27. 27. „ New Twitter“ – immer noch kein Herz für Tastaturbenutzer Nur mit Maus
  28. 28. Accessible Twitter v. Dennis Lembrée
  29. 29. Auch mit Tastatur: Landtagslupe NRW
  30. 30. Gut sichtbarer Fokus – auch bei Sprunglinks
  31. 31. Barrierefreies Video Player „Framework“ Weitere Infos auf: http://www.einfach-fuer-alle.de/blog/id/2593/
  32. 32. Das ist wichtig! <ul><li>Ist aktuelle Position beim Durchtabben immer sichtbar? </li></ul><ul><li>Ist die Tabreihenfolge logisch? </li></ul><ul><li>Können alle Elemente angesprungen, bedient und wieder verlassen werden – auch Videos und Audios? </li></ul><ul><li>Tastaturfallen nicht vorhanden? </li></ul><ul><li>Überschriften ausgezeichnet, ARIA Landmark Roles verwendet? Warum in diesem Abschnitt? </li></ul>
  33. 33. DOKUMENTE GLIEDERN Z.B. ÜBERSCHRIFTEN
  34. 34. Blockelement? Semantik?
  35. 35. Die H-Inflation
  36. 36. Überschriften? Nicht mit uns?
  37. 37. Alles richtig gemacht?
  38. 38. TIPPS UND RAT, BERATUNG UND TESTS
  39. 39. Einfach für alle – Aktion Mensch
  40. 40. BIENE Preis – voraussichtlich 2012
  41. 41. Kontakt <ul><li>Kerstin Probiesch | Kantstraße 10/19 </li></ul><ul><li>35039 Marburg | Tel.: 06421 167002 </li></ul><ul><li>http://www.barrierefreie- informationskultur.de/ </li></ul><ul><li>Twitter: @kprobiesch </li></ul><ul><li>Tests nach WCAG 2.0 und BITV 2.0 </li></ul><ul><li>Kurztests </li></ul><ul><li>Projektleitung </li></ul><ul><li>Begleitende Beratung </li></ul><ul><li>Diese Präsentation steht unter der CC-BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/3.0/de/) </li></ul>

×