Viele Webseitenbetreiber denken bei Barrierefreiheit zuerst an Spezialfälle. An komplizierte Technik, seltene Sonderanforderungen oder große Prüfberichte.
In der Praxis sind die häufigsten Fehler aber erstaunlich alltäglich.
Es sind Dinge, die man auf sehr vielen Websites findet: zu schwache Kontraste, fehlende Alt-Texte, unklare Buttons, Formulare ohne gute Fehlermeldungen oder Menüs, die nur mit der Maus funktionieren.
Das Gute daran: Viele dieser Fehler lassen sich finden, ohne direkt ein riesiges Audit zu starten. Man muss nur wissen, worauf man achten sollte.
Hier sind die 10 häufigsten Barrierefreiheitsfehler auf Webseiten und was du dagegen tun kannst.
1. Zu schwache Kontraste
Schwache Kontraste gehören zu den Klassikern.
Hellgraue Schrift auf weißem Hintergrund. Weiße Schrift auf hellem Bild. Pastellfarbene Buttons mit dünner Schrift. Links, die sich kaum vom normalen Text unterscheiden.
Das sieht im Design oft elegant aus. Auf echten Geräten ist es aber häufig schlecht lesbar.
Besonders betroffen sind:
Fließtexte, Menüs, Buttons, Footer, Formularfelder, Fehlermeldungen und Texte auf Bildern.
Schlechter Kontrast betrifft nicht nur Menschen mit Sehbehinderung. Auch auf dem Smartphone, draußen in der Sonne oder auf älteren Bildschirmen wird das schnell anstrengend.
So prüfst du es:
Nimm die wichtigsten Seiten deiner Website und schau dir Texte, Buttons und Formularfelder bewusst an. Nutze zusätzlich ein Kontrast-Tool, statt dich nur auf dein Auge zu verlassen.
Besser machen:
Nutze klare Textfarben, stärkere Button-Kontraste und lege Text auf Bildern nur mit dunklem Overlay oder fester Fläche darüber.
2. Fehlende oder schlechte Alt-Texte
Bilder brauchen Alternativtexte, wenn sie wichtige Informationen vermitteln. Trotzdem findet man auf vielen Websites entweder gar keine Alt-Texte oder Alt-Texte wie:
„Bild“
„Foto“
„IMG_1234“
„SEO Website Barrierefreiheit BFSG“
Das hilft niemandem.
Ein guter Alt-Text beschreibt die relevante Information des Bildes. Nicht jedes Detail, nicht den Dateinamen und nicht eine Keyword-Liste.
Beispiel:
Schlecht:
„Bild Website“
Besser:
„Laptop mit geöffneter Website und sichtbarem Kontaktformular.“
Wichtig ist auch: Nicht jedes Bild braucht einen ausführlichen Alt-Text. Rein dekorative Bilder können als dekorativ behandelt werden.
So prüfst du es:
Gehe durch deine wichtigsten Seiten und frage bei jedem Bild: Welche Information würde fehlen, wenn man dieses Bild nicht sehen kann?
Besser machen:
Schreibe kurze, sinnvolle Alt-Texte. Bei Infografiken sollten die wichtigen Inhalte zusätzlich als normaler Text auf der Seite stehen.
3. Website funktioniert nicht ohne Maus
Ein sehr ehrlicher Test: Lege die Maus weg.
Wenn du deine Website nicht mit der Tastatur bedienen kannst, haben viele Nutzer ein Problem.
Typische Fehler sind:
Dropdown-Menüs öffnen nur bei Maus-Hover,
Buttons sind nicht erreichbar,
Formulare lassen sich nicht sauber ausfüllen,
Popups lassen sich nicht schließen,
Cookie-Banner blockiert die Seite,
Slider oder Tabs funktionieren nicht per Tastatur.
Barrierefreie Websites sollten wichtige Funktionen auch ohne Maus ermöglichen.
So prüfst du es:
Nutze nur Tab, Shift + Tab, Enter, Leertaste, Pfeiltasten und Escape. Gehe echte Nutzerwege durch: Kontakt aufnehmen, Produkt kaufen, Termin buchen, Formular absenden.
Besser machen:
Sorge dafür, dass Links, Buttons, Menüs, Formulare, Popups und interaktive Elemente per Tastatur erreichbar und bedienbar sind.
4. Unsichtbarer oder zu schwacher Fokus
Wenn man mit der Tastatur navigiert, muss sichtbar sein, welches Element gerade aktiv ist. Das nennt man Fokus.
Viele Websites entfernen diesen Fokusrahmen, weil er angeblich nicht schön aussieht. Dann drückt man Tab und weiß nicht mehr, wo man gerade ist.
Das ist eine echte Barriere.
Ein guter Fokus kann modern aussehen. Er muss nicht hässlich sein. Aber er muss auffallen.
Zum Beispiel durch:
einen klaren Rahmen,
eine farbige Umrandung,
einen sichtbaren Schatten,
eine deutliche Unterstreichung,
eine Hintergrundänderung.
So prüfst du es:
Drücke Tab und beobachte, ob bei jedem Link, Button und Formularfeld klar erkennbar ist, wo du dich befindest.
Besser machen:
Entferne keine Fokusmarkierung. Wenn du sie gestaltest, dann deutlich und mit gutem Kontrast.
5. Unklare Link- und Buttontexte
„Hier klicken“ ist fast nie ein guter Linktext. „Mehr erfahren“ ist manchmal okay, aber problematisch, wenn es zehnmal auf einer Seite steht.
Nutzer sollten verstehen, was passiert, wenn sie einen Link oder Button aktivieren.
Besser sind konkrete Texte:
„Kontaktformular öffnen“
„Preisliste herunterladen“
„Termin buchen“
„Produkt in den Warenkorb legen“
„Mehr über Glasreinigung erfahren“
Gerade Screenreader-Nutzer können sich Links gesammelt ausgeben lassen. Wenn dort fünfmal „Mehr erfahren“ steht, ist das wenig hilfreich.
So prüfst du es:
Gehe alle Links und Buttons auf einer Seite durch. Versteht man auch ohne viel Kontext, wohin sie führen oder welche Aktion sie auslösen?
Besser machen:
Schreibe Button- und Linktexte so konkret wie möglich. Besonders bei wichtigen Aktionen wie Kaufen, Buchen, Senden oder Herunterladen.
6. Schlechte Formularbeschriftungen und Fehlermeldungen
Formulare sind auf vielen Websites der wichtigste Kontaktpunkt. Genau dort passieren aber viele Fehler.
Typische Probleme:
Felder haben nur Platzhalter statt echte Labels.
Pflichtfelder sind nicht klar erkennbar.
Fehlermeldungen sind unverständlich.
Fehler werden nur rot markiert.
Eingaben verschwinden nach einem Fehler.
Checkboxen sind nicht sauber mit ihrem Text verbunden.
Eine Fehlermeldung wie „Fehler beim Absenden“ hilft kaum.
Besser:
„Bitte geben Sie eine gültige E-Mail-Adresse ein.“
„Bitte füllen Sie das Feld Name aus.“
„Bitte akzeptieren Sie die Datenschutzerklärung.“
So prüfst du es:
Fülle ein Formular bewusst falsch aus. Lass Pflichtfelder leer, gib eine falsche E-Mail ein und prüfe, ob du die Fehler leicht korrigieren kannst.
Besser machen:
Nutze klare Labels, verständliche Hinweise, konkrete Fehlermeldungen und zeige Fehler direkt beim betroffenen Feld an.
7. Falsche oder chaotische Überschriftenstruktur
Überschriften sind nicht nur für die Optik da. Sie geben einer Seite Struktur.
Viele Nutzer überfliegen Seiten über Überschriften. Screenreader-Nutzer können von Überschrift zu Überschrift springen. Auch Suchmaschinen verstehen Inhalte dadurch besser.
Häufige Fehler:
keine klare H1,
mehrere H1 ohne Sinn,
Überschriften werden nur wegen der Größe gewählt,
Sprünge von H2 zu H5,
wichtige Abschnitte haben gar keine Überschrift.
Eine Seite sollte eine nachvollziehbare Struktur haben. Nicht perfekt akademisch, aber logisch.
So prüfst du es:
Schau dir nur die Überschriften einer Seite an. Versteht man den Aufbau? Ergibt die Reihenfolge Sinn?
Besser machen:
Nutze Überschriften wie ein Inhaltsverzeichnis. Erst Hauptthema, dann Abschnitte, dann Unterpunkte.
8. Inhalte nur als PDF oder Bild
Viele Websites verstecken wichtige Informationen in PDFs oder Bildern.
Speisekarten, Preislisten, Öffnungszeiten, Leistungsübersichten, Mitgliedsanträge, Veranstaltungsinfos oder Produktdetails werden oft einfach als Datei hochgeladen.
Das kann problematisch sein, besonders wenn das PDF nur ein Scan ist oder das Bild Text enthält.
Wenn wichtige Informationen nur in einem Bild stehen, sind sie für Screenreader oft nicht zugänglich. Wenn ein PDF nicht sauber strukturiert ist, wird es ebenfalls schwierig.
So prüfst du es:
Frage dich: Gibt es wichtige Informationen, die nur in einem PDF oder Bild stehen?
Besser machen:
Stelle wichtige Inhalte zusätzlich als normalen HTML-Text auf die Website. PDFs sollten echte Texte, Überschriften, sinnvolle Lesereihenfolge und Alt-Texte enthalten.
9. Popups, Cookie-Banner und Overlays blockieren die Nutzung
Cookie-Banner, Newsletter-Popups, Chatfenster und Angebots-Overlays können die Bedienung massiv stören.
Besonders problematisch ist es, wenn sie:
nicht mit Tastatur erreichbar sind,
nicht geschlossen werden können,
den Fokus festhalten,
wichtige Inhalte verdecken,
auf dem Smartphone zu groß sind,
keine klare Schließen-Funktion haben.
Ein Popup, das man nicht schließen kann, macht die ganze Website unbenutzbar.
So prüfst du es:
Öffne deine Website im privaten Browserfenster, damit Cookie-Banner und Popups erscheinen. Versuche dann, alles ohne Maus zu bedienen und zu schließen.
Besser machen:
Popups müssen klar bedienbar, schließbar und mobil sauber dargestellt sein. Der Fokus sollte sinnvoll ins Popup hinein und nach dem Schließen zurückgeführt werden.
10. Mobile Ansicht wird nur optisch geprüft
Viele Websites werden am Desktop gebaut und mobil nur kurz angeschaut. Das reicht nicht.
Mobile Barrieren sind sehr häufig:
Buttons sind zu klein,
Formularfelder überlappen,
Menüs funktionieren schlecht,
Texte sind zu eng,
Cookie-Banner verdecken alles,
Tabellen laufen aus dem Bildschirm,
Text auf Bildern wird unlesbar.
Barrierefreiheit muss auch mobil funktionieren. Gerade weil viele Menschen Websites fast nur noch über das Smartphone nutzen.
So prüfst du es:
Teste deine wichtigsten Seiten auf einem echten Smartphone. Nicht nur in der Browser-Vorschau. Nutze Menü, Formular, Checkout, Buchung und Downloads.
Besser machen:
Achte auf große Touch-Ziele, klare Abstände, lesbare Schrift, einfache Formulare und störungsfreie mobile Navigation.
Warum diese Fehler so oft passieren
Die meisten Barrierefreiheitsfehler entstehen nicht aus Absicht. Sie entstehen, weil Design, Technik und Inhalte getrennt betrachtet werden.
Das Design sieht gut aus, aber der Kontrast ist zu schwach.
Das Formular funktioniert technisch, aber die Fehlermeldungen helfen nicht.
Das Menü sieht modern aus, aber ohne Maus kommt man nicht weiter.
Das PDF ist schnell hochgeladen, aber nicht wirklich nutzbar.
Barrierefreiheit ist deshalb kein einzelner Haken in einer Checkliste. Es ist ein Blick auf die gesamte Nutzung.
Wie du schnell die größten Probleme findest
Du musst nicht sofort ein vollständiges Audit machen. Für den Anfang reicht ein praktischer Selbsttest.
Teste diese fünf Dinge:
Bediene die Website ohne Maus.
Prüfe Kontraste bei Texten, Buttons und Formularen.
Kontrolliere Alt-Texte bei wichtigen Bildern.
Fülle Formulare absichtlich falsch aus.
Teste die wichtigsten Seiten auf dem Smartphone.
Wenn du dabei hängenbleibst, hast du echte Baustellen gefunden.
Reicht ein Accessibility-Plugin?
Ein Plugin kann helfen. Aber es löst nicht alle Probleme.
Es kann vielleicht Schriftgrößen anpassen, Kontrastoptionen anbieten oder Hinweise geben. Aber es repariert nicht automatisch:
falsche Überschriften,
unklare Buttontexte,
schlechte Formulare,
nicht bedienbare Menüs,
unzugängliche PDFs,
problematische Popups,
einen komplizierten Checkout.
Barrierefreiheit entsteht nicht durch ein Symbol am Seitenrand. Sie entsteht durch saubere Inhalte, gute Bedienbarkeit und klare Struktur.
Kurze Checkliste
Prüfe deine Website mit diesen Fragen:
Sind Texte gut lesbar?
Haben wichtige Bilder sinnvolle Alt-Texte?
Funktioniert die Website ohne Maus?
Ist der Fokus sichtbar?
Sind Links und Buttons verständlich?
Sind Formulare klar beschriftet?
Sind Fehlermeldungen hilfreich?
Ist die Überschriftenstruktur logisch?
Stehen wichtige Inhalte nicht nur in PDFs oder Bildern?
Sind Popups und Cookie-Banner bedienbar?
Funktioniert alles mobil?
Wenn du mehrere Fragen mit Nein beantworten musst, lohnt sich eine Überarbeitung.
Fazit: Die häufigsten Fehler sind oft die wichtigsten
Die größten Barrierefreiheitsprobleme sind selten versteckt in exotischer Spezialtechnik. Meist liegen sie direkt vor uns: schlechte Lesbarkeit, unklare Bedienung, fehlende Beschreibungen, nicht erreichbare Menüs oder verwirrende Formulare.
Mein praktischer Rat: Starte nicht mit Perfektion. Starte mit den häufigsten Fehlern. Genau dort erreichst du am schnellsten eine spürbare Verbesserung.
Eine barriereärmere Website ist nicht nur besser für Menschen mit Behinderung. Sie ist klarer, einfacher und angenehmer für alle Nutzer.
Und meistens merkt man nach den ersten Korrekturen: Barrierefreiheit macht eine Website nicht komplizierter. Sie macht sie besser.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.