Barrierefreiheit heißt, dass deine Website auch mit schwachem Sehvermögen, ohne Maus, mit Screenreader, mit Zittern der Hände oder schlicht mit dem Handy in der prallen Sonne nutzbar ist. Sie verbessert zudem meist Auffindbarkeit und Abschlüsse, weil klare Seiten für alle einfacher sind.
Du musst die vollständigen WCAG-Richtlinien nicht beherrschen, um anzufangen. Diese Grundlagen decken die häufigsten Probleme ab, und du kannst jedes davon in wenigen Minuten selbst prüfen.
Barrierefreiheit beginnt mit vier Gewohnheiten: kräftiger Farbkontrast, vollständige Tastaturbedienung, aussagekräftiger Alt-Text bei Bildern und lesbarer Text. Sie helfen Menschen mit Behinderung und allen anderen auch.
Kontrast und lesbarer Text
Hellgrauer Text auf Weiß wirkt elegant und ist für viele unlesbar. WCAG AA verlangt ein Kontrastverhältnis von mindestens 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text. Mit kostenlosen Kontrast-Prüfern gibst du zwei Farben ein und bekommst das Verhältnis.
- Nutze Fließtext von mindestens 16 px mit großzügigem Zeilenabstand.
- Verlasse dich nie allein auf Farbe, etwa Rot für Fehler; ergänze ein Symbol oder Worte.
- Lass das Zoomen zu; deaktiviere das Zoomen per Fingergeste nicht.
Tastatur und Fokus
Drücke auf deiner Seite die Tab-Taste. Erreichst du jeden Link, jede Schaltfläche und jedes Feld in sinnvoller Reihenfolge, und siehst du immer, wo du bist? Ein sichtbarer Fokusrahmen ist unverzichtbar. Menüs, Pop-ups und Karussells müssen auch mit Eingabe, Leertaste und Escape funktionieren.
Alt-Text, Beschriftungen und Struktur
Jedes inhaltlich relevante Bild braucht eine kurze Beschreibung dessen, was es zeigt oder bewirkt; dekorative Bilder erhalten ein leeres Alt-Attribut, damit Screenreader sie überspringen. Jedes Formularfeld braucht eine sichtbare Beschriftung, nicht nur einen Platzhaltertext. Nutze echte Überschriften in der richtigen Reihenfolge und Schaltflächen, die sagen, was sie tun, statt „hier klicken“.
Rechtlicher Rahmen in Deutschland und der EU
Mit dem Barrierefreiheitsstärkungsgesetz, das den European Accessibility Act umsetzt, müssen immer mehr digitale Produkte und Dienstleistungen, etwa Online-Shops, Barrierefreiheitsanforderungen erfüllen. Für Websites öffentlicher Stellen gelten schon länger eigene Vorgaben. Prüfe, was für dein Angebot gilt; das sind allgemeine Hinweise, keine Rechtsberatung.
Per Chat anfordern
Mit Uttra kannst du diese Verbesserungen in einfachen Worten anfordern. Ein Prompt:
„Verbessere die Barrierefreiheit meiner Website: Erhöhe den Textkontrast auf WCAG AA, ergänze sichtbare Fokusrahmen, gib jedem Bild einen aussagekräftigen Alt-Text, beschrifte alle Formularfelder und sorge dafür, dass das Menü mit der Tastatur bedienbar ist.“
Teste danach selbst: nur mit Tab, mit 200 Prozent Zoom und mit einem kostenlosen Screenreader. Automatische Werkzeuge finden nur einen Teil der Probleme.