Best and Worst Practice In der Barrierefreiheit Kerstin Probiesch
Kurz die Vita <ul><li>Freie Beraterin </li></ul><ul><li>Invited Expert – W3C – Evaluation and Methodology Task Force (Eval...
WAS BARRIEREFREIHEIT NICHT IST
Layout für „Normale“
Und das für „die anderen“?
Textversion Hörzu – Finde den Fehler
Oft nur der schöne Schein
WCAG 2.0 – AA konform?
Grafiken ohne alt-Attribute
Grafiken über CSS / Transparenz – Problematisch bei eigenen Farbeinstellungen
Was bleibt? Nicht mal A-konform
MEHRFACHKENNZEICHNUNG <ul><li>Nun aber: </li></ul>
Informationen nicht nur über Farbe oder sensorische Eigenschaften vermitteln <ul><li>Nicht nur so: </li></ul><ul><ul><li>„...
Individuelle Farbwahrnehmung z.B. Farbfehlsichtigkeit
Beispiel: Benutzerdefinierte Farbeinstellungen
Problem: Informationsvermittlung nur über Farbe allein. Zudem: schlechter Kontrast
Benutzerdefinierte Farbeinstellungen – „Green Tags“ nicht mehr ermittelbar
Ansicht ohne CSS
Zusammenspiel von Text und Struktur
Mehrfachkennzeichnung in Navigationsbereichen
auch mit benutzerdefinierten Farbeinstellungen sichtbar
„ Versteckte“ Texte für Screenreadernutzer
Best Practice: Mehrfachkennzeichnung in Formularen (Stadt Wien)
TASTATURBEDIENBARKEIT
Aber nicht so:
Und nicht so: Vorschau nur für Mausbenutzer
„ New Twitter“ – immer noch kein Herz für Tastaturbenutzer Nur mit Maus
Accessible Twitter v. Dennis Lembrée
Auch mit Tastatur: Landtagslupe NRW
Gut sichtbarer Fokus – auch bei Sprunglinks
Barrierefreies Video Player „Framework“ Weitere Infos auf:  http://www.einfach-fuer-alle.de/blog/id/2593/
Das ist wichtig! <ul><li>Ist aktuelle Position beim Durchtabben immer sichtbar? </li></ul><ul><li>Ist die Tabreihenfolge l...
DOKUMENTE GLIEDERN Z.B. ÜBERSCHRIFTEN
Blockelement? Semantik?
Die H-Inflation
Überschriften? Nicht mit uns?
Alles richtig gemacht?
TIPPS UND RAT, BERATUNG UND TESTS
Einfach für alle – Aktion Mensch
BIENE Preis – voraussichtlich 2012
Kontakt <ul><li>Kerstin Probiesch | Kantstraße 10/19  </li></ul><ul><li>35039 Marburg  | Tel.: 06421 167002  </li></ul><ul...
Nächste SlideShare
Wird geladen in …5
×

Worst and Best Practices in der Barrierefreiheit

1.474 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.474
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
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>

×