Accessibility

Barrierefreiheit ist Pflicht, nicht optional. Sie hilft allen – nicht nur Menschen mit Behinderungen.

Warum wichtig

Für alle:

• Untertitel helfen in lauten Umgebungen
• Klare Navigation hilft bei Ablenkung
• Guter Kontrast hilft bei Sonnenlicht
• Tastatur-Steuerung hilft bei repetitiven Aufgaben

Rechtlich:

• WCAG 2.1 AA ist der Standard
• EU-Richtlinie verpflichtend
• Barrierefreiheit ist menschenrechtlich verankert

Die 4 Prinzipien (POUR)

1. Wahrnehmbar (Perceivable)

Informationen und Designelemente dürfen nicht “unsichtbar” sein. Nutzer müssen die Inhalte mit den Sinnen erfassen können, die ihnen zur Verfügung stehen (Sehen, Hören oder Tasten).

Kernfrage: Kann der Nutzer die Inhalte sehen oder hören?

2. Bedienbar (Operable)

Die Benutzeroberfläche darf keine Interaktionen erfordern, die ein Nutzer nicht ausführen kann. Die Navigation muss für jeden möglich sein, egal ob mit der Maus, der Tastatur oder per Sprachsteuerung.

Kernfrage: Kann der Nutzer die Navigation und die Steuerungselemente benutzen?

3. Verständlich (Understandable)

Nicht nur die Technik, auch der Inhalt muss begreifbar sein. Die Bedienung sollte logisch und vorhersehbar aufgebaut sein, damit Nutzer nicht durch komplexe Abläufe verwirrt werden.

Kernfrage: Weiß der Nutzer, was zu tun ist und versteht er die Informationen?

4. Robust (Robust)

Inhalte müssen so programmiert sein, dass sie von einer Vielzahl von Technologien (verschiedene Browser, Screenreader, Hilfsmittel) zuverlässig interpretiert werden können – auch wenn sich die Technik weiterentwickelt.

Kernfrage: Funktionieren die Inhalte auch mit assistiven Technologien und zukünftigen Browser-Versionen?

Praxis-Checkliste

Design:

• Kontrast prüfen (min. 4.5:1)
• Touch-Targets min. 44x44px
• Farbe allein kodiert keine Info
• Fokus-States designed

Entwicklung:

• Semantisches HTML verwenden
• Alt-Texte für alle Bilder
• Tastatur-Navigation testen
• ARIA nur wo nötig

Content:

• Klare Überschriften-Hierarchie
• Aussagekräftige Link-Texte
• Einfache Sprache
• Transkripte für Audio/Video

Quick Wins

1. axe DevTools – Browser Extension für schnelle Checks
2. Tastatur-Test – Tab durch die ganze Seite
3. Screenreader – VoiceOver (Mac) oder NVDA (Windows) testen
4. Zoom 200% – Layout bricht nicht

Tools

• axe DevTools – Automated Testing
• Lighthouse – Integrated in Chrome
• WAVE – Web Accessibility Evaluator
• Stark – Figma Plugin

Don’ts

• Accessibility als “nice-to-have” betrachten
• Nur auf automatisierte Tests verlassen
• Annahmen über Nutzer*innen-Fähigkeiten treffen
• “Wir haben keine Nutzer*innen mit Behinderungen”

---

Barrierefreiheit ist keine Feature-Liste, sondern eine Haltung.