Barrierefreiheit in Webanwendungen

Zu kompliziert! nur für Blinde! zu teuer! müssen wir das machen?

Barrierefreiheit bringt sauberen HTML und CSS Code.

Man benutzt aktuelle Technik und bekommt SEO Optimierung gratis.

Accessibility vs Useability

• Accessibility ist, wie gut man eine Seite erreichen kann
• Useability ist, wie gut man eine Seite benutzen kann

Gesetze und Normen

• Behindertengleichstellungsgesetz BGG -> §11
• Barrierefreie Informationstechnik-Verordnung (BITV)
• Web Accessibility Initiative (WAI)
  • Alternative zu Videos und Audioinhalte
  • Struktus/Semantik nicht nur durch Farben darstellen
  • W3C Richtlinen einhalten
  • Klare Navigationsmechanismen
  • Einfach gehaltene Inhalts- und Satzstrukturen
  • Geräteunabhängiges Design

Wer braucht's?

• Nutzer mit leerem Mausakku
• Gruppe der 50+
• Sehnenscheidentzündung
• Rot-Grüne-Schwäche
• moderne Mobiltechnik
• langsame Internetverbindung
• 6,7 Mio mit Schwerstbehinderung
• 164.000 blinde und 1 Mio sehbehinderte Menschen

Farben & Kontraste

• Rot/Grün-Kombinationen vermeiden
• Grelle Farben vermeiden
• Genug Kontrast zwischen Text und Hintergrund

Farbkontrast Analyzer von Web for all

HTML

• Korrekte HTML Elemente nutzen (h1-h6, p, table, ul, ...)
• Suchfeld als erstes im Quelltext anlegen
• Verstecktes Menü
• Sprunglinks
  • <a href>, <a id>
  • nicht zuviele davon
  • hervorheben bei hover, focus, active
• Formatierungen und Darstellungen
  • sonnvolle Formatierungen
  • Unterstreichungen nur bei Links
  • Fettdruck in Maßen
  • nichr kursiv verwenden
  • sinnvolle alt-Attribute in Bildern <img alt="Hier eine Beschreibung">
• Formulare
  • Pflichtfeldhinweis in <label> (Nicht nur ein Sternchen - für Blinde)
  • Captcha Frage innerhalb des Labels positionieren
  • Fehlermeldung vor Eingabefeldern ausgeben (im HTML!, nicht zwangsweise auch so sichtbar)
  • Seitentitel bei Fehlerausgabe abändern
  • aktives Feld hervorheben
• Navigation
  • aktiver Navigationspunkt mit <strong> einfaßen
  • Links "flächig" (display: block;) definieren, damit Benutzer mehr als den Text zum klicken haben
  • verstecktes Menü mit Sprunglinks

Didaktik

• Fachbegriffe, Abkürzungen, Fremdwörter vermeiden
• Einfache Sätze und Sprache
• Links mit sinnvollen Bezeichnungen

Display: none; wird vom Screenreader nicht vorgelesen, d.h. man darf Dinge, die Screenreader lesen sollen nicht mit display: none; belegen!

Screenreder können JavaScript!

Summary

Barrierefreiheit ist Win-Win-Situation für Benutzer, Entwickler und das Management.

Optimierungen sind nicht nur gut für das HTML, CSS sondern auch für SEO.