TL;DR
Niedriger Farbkontrast
Fehlende Alt-Texte für Bilder
Problem: Bilder ohne Alt-Texte bleiben für Nutzer:innen von Screenreadern unsichtbar, wodurch wichtige Informationen verloren gehen und Nutzer:innen ausgeschlossen werden.
Quick Win: Füge kurze, beschreibende Alt-Texte zu den Bildern hinzu, die das Bild und seinen Kontext erklären. Das WAVE Evaluation Tool kann dir dabei helfen, fehlende Alt-Texte schnell zu finden.
Nicht-tastaturfreundliche Navigation
Problem: Wenn interaktive Elemente nur mit der Maus bedienbar sind, schliesst das Menschen aus, die auf die Tastaturnavigation angewiesen sind.
Quick Win: Sorge dafür, dass alle interaktiven Elemente mit der Tabulatortaste erreichbar sind und einen sichtbaren Fokus-Indikator haben. Das aXe DevTools Plugin unterstützt dich dabei, die Navigation zu prüfen und Schwachstellen aufzudecken.
Übersprungene oder falsch strukturierte Headings
Problem: Eine unsaubere Heading-Struktur macht Inhalte für Screenreader schwer verständlich und erschwert die Orientierung.
Quick Win: Achte auf eine logische Hierarchie deiner Heading-Struktur und nutze H1 für den Haupttitel H2, H3 usw. in sinnvoller Reihenfolge (unabhängig vom Layout). Du kannst HeadingsMap nutzen, um deine Header Struktur zu prüfen.
Unklare Beschriftungen von Formularfeldern
Problem: Fehlende Labels bei Formularfeldern führen zu Verwirrung und erschweren das Ausfüllen, besonders für Screenreader-Nutzer:innen.
Quick Win: Verwende für jedes Eingabefeld <label for=»id»>, um es eindeutig zu beschreiben. Tools wie Accessibility Insights helfen dir, Formulare auf ihre Barrierefreiheit zu prüfen.
Fehlende Untertitel oder Transkripte für Medieninhalte
Problem: Ohne Untertitel oder Transkripte sind Videos und Audioinhalte für Menschen mit Hörbehinderungen nicht zugänglich.
Quick Win: Erstelle Untertitel für deine Videos. Achte darauf, diese nicht fix ins Video «einzubrennen», sondern diese als .srt-Files zugänglich zu machen. Ein Transkript unter dem Video hilft ebenfalls, den Inhalt zugänglich zu machen.
Animierte oder blinkende Inhalte ohne Steuerung
Problem: Starke Animationen können Menschen mit kognitiven Beeinträchtigungen und Epilepsie beeinträchtigen oder überfordern.
Quick Win: Vermeide Animationen, die nicht der Informationsvermittlung dienen und biete eine Option an, Animationen zu pausieren oder komplett abzuschalten. Mit prefers-reduced-motion in CSS kannst du Animationen zudem systemweit minimieren.
Fehlende oder unklare Link-Beschreibungen
Problem: Links wie «Hier klicken» oder «Mehr erfahren» sagen nichts über das Ziel aus und erschweren Nutzer:innen die Navigation.
Quick Win: Verwende beschreibende Linktexte, die klar auf das Ziel hinweisen. Mit dem Link Purpose Evaluator kannst du überprüfen, ob deine Links verständlich benannt sind.
Keine ARIA-Labels für dynamische Inhalte
Problem: Dynamische Inhalte wie Pop-ups oder Slider bleiben ohne ARIA-Labels für Screenreader unsichtbar.
Quick Win: Nutze ARIA-Rollen und -Labels, um dynamische Elemente korrekt zu kennzeichnen. Das aXe DevTools Plugin erkennt fehlende ARIA-Labels und gibt dir Korrekturvorschläge.
Kein regelmässiges Accessibility-Testing
Problem: Ohne regelmässige Tests schleichen sich Accessibility-Fehler ein, die Nutzer:innen oft vor Barrieren stellen.
Quick Win: Teste deine Website regelmässig mit Google Lighthouse oder vergleichbaren Tools, um Accessibility-Probleme zu identifizieren und schrittweise zu beheben.
Fazit
Mach deine Website für alle zugänglich.
Wir helfen dir dabei — just drop a note.
