Barrierefreiheit auf Website: 10 häufige Beispiele digitaler Barrieren

Barrierefreiheit im Web ist längst kein Nice-to-have mehr: Seit dem 28. Juni 2025 macht das Barrierefreiheitsstärkungsgesetz (BFSG) digitale Zugänglichkeit für viele Unternehmen rechtlich verbindlich. Doch auch ohne gesetzlichen Druck solltest du dich mit der Thematik beschäftigen und deine Website allen potenziellen Kund*innen zugänglich machen. Wir analysieren die 10 häufigsten Accessibility-Barrieren auf Websites und zeigen dir konkrete Lösungsvorschläge.

• Seit dem 28. Juni 2025 müssen viele verbraucherorientierte Online-Dienste nach BFSG barrierefrei gestaltet werden (EN 301 549 ⇄ WCAG 2.1 AA).
• Zu den häufigsten Barrieren, die in den vier Prinzipien der digitalen Barrierefreiheit festgehalten sind, gehören unter anderem fehlende Alternativtexte für Bilder, zu schwache Farbkontraste sowie nicht beschriftete Online-Formulare.
• Viele der digitalen Barrieren lassen sich mit vergleichsweise geringem Aufwand beheben. Wer diese Hürden beseitigt, verbessert die Zugänglichkeit und Nutzererfahrung gleichermaßen.

Auch wenn die Anforderungen an digitale Barrierefreiheit klar definiert sind, tauchen in der Praxis immer wieder dieselben Hürden auf. Manche davon lassen sich in wenigen Minuten beheben, andere erfordern tiefere Eingriffe ins Design oder in den Code. Die folgenden zehn digitalen Barrieren gehören zu den häufigsten Stolpersteinen. Wir zeigen dir, wie du sie Schritt für Schritt aus dem Weg räumst.

Bilder sind oft zentrale Informationsträger auf Websites. Wenn sie jedoch keinen Alternativtext aufweisen, bleiben sie für Screenreader unsichtbar. Die Folge: Menschen mit einer Sehbehinderung können nicht herausfinden, was auf dem Bild zu sehen ist.

Ebenso gilt dies für Suchmaschinen: Erst mit einem Alternativtext können Google, Bing und Co. den Inhalt eines Bildes verstehen und indexieren. Die Lösung: kurze, aussagekräftige Texte wie „Holztisch mit Laptop, Kaffeetasse und Notizbuch“ verwenden. Prüfe deine Seite regelmäßig mit Tools wie dem WAVE-Validator, um fehlende Alternativtexte schnell zu erkennen und nachzubessern.

• Kritikalität: hoch
• Aufwand: bis zu fünf Minuten pro Bild, bei großen Bildmengen summiert sich der Aufwand entsprechend

Zu schwache Kontraste erschweren das Lesen, und zwar nicht nur für Menschen mit einer Sehbeeinträchtigung, sondern für alle. Helle Schrift auf weißem Hintergrund oder blasse Buttons sind häufige Stolpersteine. Statt hellgrauer Schrift auf weißem Grund ist zum Beispiel ein dunkles Grau oder Schwarz besser. Im Übrigen verbessern gute Kontraste nicht nur die Zugänglichkeit, sondern steigern auch die allgemeine Nutzerfreundlichkeit deiner Website erheblich.

• Lösung: Schrift und Buttons mit deutlichem Kontrast gestalten. Tools wie der WebAIM Contrast Checker helfen dir dabei, deine Farbpalette zu testen.
• Kritikalität: hoch
• Aufwand: 30 bis 90 Minuten pro Audit, mehrere Stunden für Designanpassung, mehrere Wochen für ein neues Redesign

Nicht allen Menschen ist es möglich, auf einer Website mit einer Maus oder einem Trackpad zu navigieren. Wenn also Buttons, Menüs oder Formulare nicht per Tabulator zu erreichen sind, bleibt deine Seite für sie unzugänglich.

• Lösung: Teste deine Seite selbst, indem du die Maus ausschaltest und ausschließlich die Tastatur nutzt. So erkennst du schnell, ob Buttons, Menüs oder Slider tatsächlich per Tastatur zugänglich sind.
• Kritikalität: kritisch
• Aufwand: bis zu drei Tage für einfache Websites, mehrere Wochen für komplexe Anwendungen

Wer mit der Tastatur navigiert, braucht klare Rückmeldung darüber, welches Element gerade aktiv ist. Ohne sichtbaren Fokus verlieren Nutzer*innen schnell die Orientierung. Vermeide es, den Standardfokus zu entfernen, und passe ihn stattdessen mit klaren Kontrasten an das Design an. 

• Lösung: Fokusrahmen sichtbar machen und CSS anpassen. So stellst du sicher, dass deine Seite auch ohne Maus intuitiv nutzbar bleibt.
• Kritikalität: hoch
• Aufwand: zehn Minuten bis zwei Stunden

Formulare sind auf einer Website oft entscheidend, sei es für die Kontaktaufnahme, den Newsletter oder für einen Kauf. Fehlen klare Beschreibungen, wissen User*innen nicht, welche Angabe in ein bestimmtes Feld gehört. 

• Lösung: Jedes Eingabefeld mit eindeutiger Bezeichnung versehen (z. B. „E-Mail-Adresse“) und Labels korrekt setzen. So werden Formulare deutlich nutzerfreundlicher, weil alle verstehen, was wo eingetragen werden muss.
• Kritikalität: hoch
• Aufwand: zehn bis 60 Minuten pro Formular, je nach Größe auch mehrere Stunden bis Tage

Automatisch ablaufende Slider oder Sessions, die ohne Vorwarnung enden, können dazu führen, dass Nutzer*innen Inhalte nicht vollständig erfassen, ihre Eingaben oder ganz die Orientierung verlieren. Besonders betrifft dies Menschen, die mehr Zeit für Interaktion oder Lektüre benötigen. Sie werden so faktisch von der Nutzung ausgeschlossen. 

• Lösung: Gib ihnen die Kontrolle, indem du Pausen-, Stopp- oder Verlängerungsfunktionen anbietest. Beispiel: Ein Bilder-Slider sollte einen Button haben, um das automatische Weiterblättern zu stoppen. 
• Kritikalität: mittel bis hoch
• Aufwand: 30 Minuten bis zu zwei Stunden für Slider, ein bis zwei Tage für Session-Timeouts

Bei Videos gibt es eine ähnliche Hürde: Wenn sie automatisch starten und vielleicht sogar Ton abspielen, sind sie nicht nur störend, sondern eine echte Hürde.

• Lösung: Biete eine gut sichtbare Pause- oder Stopp-Funktion an und deaktiviere Autoplay, wo es nicht zwingend nötig ist. 
• Kritikalität: mittel bis hoch
• Aufwand: mehrere Stunden

Mehr als 64 Prozent des globalen Web-Traffics stammen inzwischen von mobilen Geräten. Trotzdem sehen viele Websites auf dem Smartphone immer noch aus, als wären sie im Jahr 2000 stehen geblieben: winzige Buttons, verrutschte Layouts und eine unzureichende Bedienbarkeit.

Am besten prüfst du das direkt auf dem Smartphone: Sind die Buttons groß genug? Fallen Abstände auf, die zu klein oder zu groß wirken und dadurch irritieren? Lässt sich alles problemlos anklicken und aufrufen? So findest du schnell heraus, wo noch nachgebessert werden muss.

• Lösung: Setze auf ein responsives Design, das Inhalte automatisch an verschiedene Bildschirmgrößen anpasst.
• Kritikalität: hoch
• Aufwand: Stunden bis Wochen, abhängig von der Codebasis und dem Design

Wenn die Sprache deiner Website nicht im Code definiert ist, haben Screenreader Schwierigkeiten bei der richtigen Aussprache (vor allem bei mehrsprachigen Inhalten oder vielen fremdsprachigen Begriffen).

• Lösung: Setze das lang-Attribut im HTML-Tag, zum Beispiel <html lang=“de“>. So weiß die assistive Technologie sofort, in welcher Sprache der Inhalt vorliegt.
• Kritikalität: mittel
• Aufwand: circa eine halbe Stunde pro Template

Barrierefreiheit endet nicht bei deiner Website, sie umfasst auch alle downloadbare Inhalte wie etwa PDFs. Diese Dokumente müssen genauso zugänglich gestaltet werden wie deine restlichen Online-Inhalte auf deiner Website.

• Lösung: Ein zentrales Element dafür sind sogenannte Tags. Sie geben dem PDF eine logische Struktur: Überschriften, Absätze, Listen oder Tabellen werden für Screenreader erkennbar und in der richtigen Reihenfolge vorgelesen. Auch Alternativtexte für Bilder und klickbare Inhaltsverzeichnisse gehören dazu. Mit Tools wie Adobe Acrobat oder dem PAC-Checker kannst du prüfen, ob deine PDFs korrekt getaggt sind und so sicherstellen, dass wirklich alle Nutzer*innen sie problemlos lesen und verstehen können.
• Kritikalität: hoch bis kritisch
• Aufwand: mehrere Stunden pro PDF, große Beständen erfordern im besten Fall ein Projekt

Barrierefreiheit im digitalen Raum ist kein Extra, das man irgendwann „noch mitnimmt“. Sie entsteht dort, wo du Schritt für Schritt diejenigen Hürden beseitigst, die Nutzer*innen sonst ausbremsen.

Jeder Alternativtext, jedes sauber beschriftete Formular und jedes mobil optimierte Layout macht deine Seite leichter zugänglich, und das spüren alle deine Besucher*innen. Fang mit den hier zehn vorgestellten Punkten an und prüfe deine Website kritisch. Mit diesen Schritten verwandelst du digitalen Barrieren in reibungslose Nutzererlebnisse:

• Quick Wins (48 Stunden): Alt-Texte für wichtigste Bilder, Fokusrahmen aktivieren, lang-Attribut ergänzen, Autoplay deaktivieren
• Kurzfristig (1 bis 14 Tage): Farbkontraste verbessern, Formularlabels ergänzen, Slider/Timeouts kontrollierbar machen
• Mittelfristig (2 bis 8 Wochen): Tastaturbedienbarkeit für alle Funktionen sicherstellen, mobile Optimierung nachziehen
• Langfristig (Projekt): PDF-Bestände barrierefrei aufbereiten und Accessibilty-Prozesse in Redaktions- und Design-Workflows integrieren

Copyrights Titelbild: Kiattisak / stock.adobe.com