Das Barrierefreiheitsstärkungsgesetz, welches die Accessibility-Mindestanforderungen für den Großteil aller Websites vorgibt, tritt bereits im Juni 2025 in Kraft. Unternehmen drohen hohe Geldstrafen und im schlimmsten Fall sogar die Abschaltung der betroffenen Website, sollten sie das Gesetz nicht befolgen. Grund genug, einen Blick auf die häufigsten Accessibility-Fehler zu werfen.
Inhalt:
Was ist Accessibility?
Barrierefreiheit bedeutet, dass alle Menschen, unabhängig von möglichen körperlichen oder geistigen Einschränkungen, mit ihrer Umwelt interagieren können. Aus dem Alltag kennt man zum Beispiel Ampeln, die Audio-Signale für sehbehinderte Menschen haben oder Rampen für Menschen mit Rollstuhl.
Im Zusammenhang mit Websites benutzt man meist den englischen Begriff „Accessibility“. Hier geht es vor allem darum, dass alle Menschen die Inhalte wahrnehmen, verstehen und bedienen können. Viele Websites sind für Menschen mit Sehbehinderungen oder motorischen Einschränkungen nicht benutzbar. Aus diesem Grund muss darauf geachtet werden, dass die eigene Website auch für verschiedene Endgeräte und Assistenzsoftware wie Screenreader geeignet und alternative Bedienkonzepte, wie etwa eine Tastatursteuerung, möglich ist.
All diese Anforderungen werden über die „Web Content Accessibility Guidelines“ (WCAG) des W3C geregelt und auch im neuen Barrierefreiheitsstärkungsgesetz als Mindestanforderungen herangezogen.
Die WCAG sind der Standard für Barrierefreiheit im Netz und Grundlage der entsprechenden Gesetze in Europa, den USA und anderen Regionen. Laut einer Studie der gemeinnützigen WebAIM von 2024 sind immer noch knapp 96% der beliebtesten 1 Million Websites nicht WCAG-konform. [1]
Im Durchschnitt weisen die Seiten satte 56 Fehler auf, die durch die automatischen Tests gefunden werden konnten. Da nur ein kleiner Teil der WCAG-Kriterien automatisch testbar sind, dürfte die Dunkelziffer aber weitaus höher sein.
Wir möchten deshalb über die häufigsten Fehler aufklären und zeigen, wie sie behoben werden können.
1. Schlechter Kontrast bei Texten
Ein guter Kontrast zwischen Text und Hintergrund ist essenziell für die Lesbarkeit einer Website. Schlechte Kontraste führen dazu, dass Texte nicht gelesen werden können und Bedienelemente nicht erkannt werden. Die WCAG geben daher ein Kontrastverhältnis von mindestens 4,5 : 1 für Fließtexte und 3 : 1 für große Textinhalte, wie etwa Überschriften, vor.
Das Kontrastverhältnis lässt sich leicht ermitteln und entsprechend verbessern, indem man entweder die Entwicklertools der Browser oder spezielle Online-Tools verwendet, in welche die Farbwerte eingetragen werden. Beispielsweise ist der Contrast Checker von WebAIM eine gute Wahl, um das Kontrastverhältnis zu kontrollieren. [2]
(Screenshot: Chrome-Entwickler-Tools. Auf der Abbildung ist zu sehen, dass das Kontrastverhältnis 9.84 beträgt und somit deutlich über dem Minimum von 4,5 liegt.)
2. Fehlende Alt-Texte bei Bildern
Wenn Bilder zum Inhalt einer Seite beitragen, benötigen diese eine Text-Alternative für sehbehinderte Menschen. Fehlende Alt-Texte führen dazu, dass wichtige Informationen nicht zugänglich sind und sich im Zweifel der Inhalt der Seite nicht erschließen lässt. Aus diesem Grund muss das sogenannte „Alt“-Attribut bei jedem Bild vorhanden sein. Hierbei sollte darauf geachtet werden, dass die Beschreibung im Kontext der Website sinnvoll ist. Auch Bilder, die einen rein dekorativen Charakter haben, erhalten einen leeren Alt-Text: alt=““. So signalisieren wir einem Screenreader, dass dieses Bild ignoriert werden kann.
Sinnvolle Alt-Texte sind aber auch für sehende Nutzer:innen von Vorteil, da mittels des Beschreibungstextes der Inhalt erfasst werden kann, auch wenn ein Bild nicht geladen wird.
3. Fehlende Beschriftung von Formularfeldern
Damit die User:innen verstehen, was in einem Formularfeld eingetragen werden soll, werden Labels verwendet. Das ist auch für die Sprachsteuerung wichtig: Nutzer:innen können beispielsweise „Springe zum Feld E-Mail-Adresse“ sagen, um durch das Formular zu navigieren.
Das Label kann mittels dem „for“-Attribut mit dem Input-Feld verknüpft werden. Diese Vorgehensweise hat den Vorteil, dass auch auf das Label geklickt werden kann, um das Feld zu editieren. Dieses Detail ist vor allem bei kleinen Elementen, zum Beispiel bei Radio-Buttons, relevant.
(Beispiel-Code eines barrierefreien Input-Elements)
Ein häufiger Fehler ist die Verwendung des „placeholder“-Attributs, um ein Input-Feld zu beschriften. Dies ist nicht korrekt, da auf diese Art und Weise die Bedeutung des Input-Feldes nicht erfasst werden kann und der Platzhalter-Text nach einer Usereingabe verschwindet. Somit können auch sehende Nutzer:innen bei einem ausgefüllten Formular eventuelle Fehleingaben nicht mehr nachvollziehen.
4. Leere Links
Leere Links sind Links, die keinen Text-Inhalt haben. Häufig enthalten sie nur Bilder oder Icons. Bei der Verwendung von leeren Links muss dafür gesorgt werden, dass ein Text ermittelt werden kann. Das geschieht entweder über die Verwendung eines unsichtbaren Textinhalts oder eines sogenannten ARIA-Labels. „ARIA“ steht für „Accessible Rich Internet Applications“ und ist eine Erweiterung von HTML um spezielle Accessibility-Attribute. Diese können genutzt werden, um Barrierefreiheit zu verbessern. In der Regel sind sie allerdings nicht notwendig, sofern sauberes HTML geschrieben wurde.
(Beispiel: In diesem Link gibt es nur ein Icon, aber keinen Textinhalt.)
5. Leere Buttons
Dieser Fehler ist im Prinzip kongruent mit dem vierten Punkt, da auch HTML-Button-Elemente eine Text-Beschriftung benötigen, die von einem Screenreader ausgelesen und für die Sprachsteuerung verwendet werden kann. Icon-Buttons sind sehr verbreitet, aber können von Screenreader-Nutzer:innen nicht unterschieden werden. Außerdem zeigen Usability-Tests immer wieder, dass reine Icon-Buttons ohne Beschriftung auch von sehenden Nutzer:innen häufig nicht richtig interpretiert werden. Insofern ist eine Beschriftung für alle User:innen hilfreich.
6. Fehlende Dokumenten-Sprache
Die Sprache eines Dokuments wird über das „lang“-Attribut in HTML definiert. Eine Seite auf Deutsch benötigt so beispielsweise das Attribut „lang=de“. Das Attribut wird im äußersten Tag, dem html-tag gesetzt, und signalisiert dem Screen-Reader in welcher Sprache der Text vorgelesen werden soll. Die falsche Definition von Sprachen führt zu einer unverständlichen Aussprache. Wenn einzelne Abschnitte eine andere Sprache nutzen, muss auch dies an der entsprechenden Stelle gesetzt werden.
Weitere häufige Fehler
Falsche Überschriften-Hierarchien
Gute Überschriften sind ein zentrales Element für Nutzer:innen von Screenreadern, um schnell zu relevanten Inhalten zu springen, ohne sich jedes einzelne Wort vorlesen lassen zu müssen.
HTML bietet sechs Überschriften von „h1“ bis „h6“an, welche in der richtigen Reihenfolge verwendet werden müssen.
(Screenshot: Die Reihenfolge der Überschriften ist falsch und eine Ebene (h3) wurde übersprungen.)
Auf jeder Seite darf genau eine „h1“ verwendet werden. Die restlichen Überschriften dürfen mehrfach vorkommen, müssen aber in der richtigen Reihenfolge verwendet werden.
Die richtige Anwendung von Überschrift-Formaten wird übrigens übrigens auch von Suchmaschinen-Crawlern belohnt und verbessert dadurch das SEO-Ranking Ihrer Website.
Landmark-Elemente
Bei der Nutzung von JavaScript-Frameworks nutzen viele Entwickler:innen vermehrt div-Elemente, die keine semantische Bedeutung tragen. Man spricht dann von einer „div-Suppe“ in der kein Kontext mehr erkannt werden kann.
Eine bessere Struktur kann durch die Verwendung sogenannter „Landmarks“ geschaffen werden. „Landmark“-Elemente helfen Screenreader-Nutzer:innen schnell zwischen wichtigen Blöcken, wie dem Haupt-Content („main“) oder der Navigation („nav“) zu navigieren.
Fehlende Focus-Styles
Für die Bedienung mittels Tastatur muss jederzeit erkennbar sein, welches Element gerade im Fokus steht. Dies wird standardmäßig über einen blauen Rahmen visualisiert.
Mausnutzer:innen nehmen diese Darstellung teilweise als störend war, so dass auf vielen Websites die Focus-Styles ausgeschalten werden. Das macht leider die Tastaturbenutzung unmöglich.
Dabei gäbe es eine einfache Lösung für das Ästhetik-Problem: mit der CSS-Pseudo-Klasse „:focus-visible“ kann der Focus-Style speziell für Tastaturbenutzer:innen separat gestylt werden.
(Screenshot: Input mit Focus-Outline)
Fazit
Leider weisen noch immer ein Großteil aller Websites grobe Accessibility-Fehler auf. Die gute Nachricht: viele lassen sich einfach vermeiden, wenn man ein paar Grundregeln beachtet. So kann barrierefreie Entwicklung kein Kostentreiber, sondern eine große Chance sein.
Neben der Rechtssicherheit erschließt eine barrierefreie Website neue Zielgruppen und verbessert das Nutzungserlebnis für alle User:innen, was wiederum zu mehr Umsatz und zufriedenen Kund:innen führt. Zu guter Letzt tragen wir alle damit zu einer inklusiveren Gesellschaft bei.
Karsten Lenz - ist Lead UX-Designer und Frontend-Entwickler bei iteratec in Hamburg. Er beschäftigt sich schon seit 2010 mit digitaler Produktentwicklung und baut Brücken zwischen Design und Entwicklung. Dabei hat er bereits verschiedenste Kunden in den Bereichen B2C und B2B und Branchen wie Banken, E-Commerce, Logistik, ÖPNV nutzerzentrierte Produkte entwickelt. Seit einigen Jahren beschäftigt er sich besonders mit digitaler Barrierefreiheit.
Quellen:
[1] https://webaim.org/projects/million/
[2] https://webaim.org/resources/contrastchecker/
Haben Sie Fragen oder benötigen Unterstützung?
Mehr zu User Experience für Unternehmen finden Sie hier. Sprechen Sie uns auch gerne per Kontaktformular an!