Best and Worst PracticeIn der Barrierefreiheit

Kerstin Probiesch

Kurz die Vita

• Freie Beraterin• Invited Expert – W3C – Evaluation and

Methodology Task Force (EvalTF)• Fach(buch)autorin• Webkrauts• Special Interest: Barrierefreiheit von Social

Media und Open Access

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

MEHRFACHKENNZEICHNUNGNun aber:

Informationen nicht nur über Farbe oder sensorische Eigenschaften vermitteln

Nicht nur so:

– „Klicken Sie den grünen Button“– „Fehlermeldungen werden in rot“– „Pflichtfelder sind orange hinterlegt“– „Links zum Artikel finden Sie rechts“– „Weiterführende Informationen finden Sie im blauen

hinterlegen Kasten“– Aktuelle Rubriken und Seiten nur über Farbe

vermitteln

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!

• Ist aktuelle Position beim Durchtabben immer sichtbar?

• Ist die Tabreihenfolge logisch?• Können alle Elemente angesprungen, bedient und

wieder verlassen werden – auch Videos und Audios?

• Tastaturfallen nicht vorhanden?• Überschriften ausgezeichnet, ARIA Landmark

Roles verwendet? Warum in diesem Abschnitt?

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

Kerstin Probiesch | Kantstraße 10/19 35039 Marburg | Tel.: 06421 167002 http://www.barrierefreie-

informationskultur.de/Twitter: @kprobiesch

• Tests nach WCAG 2.0 und BITV 2.0• Kurztests • Projektleitung• Begleitende Beratung

Diese Präsentation steht unter der CC-BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/3.0/de/)