Eine Website auf Barrierefreiheit zu prüfen heißt nicht, eine einzelne Checkbox abzuhaken. Es geht darum, ob Menschen Inhalte wahrnehmen, verstehen, navigieren und Funktionen bedienen können — auch wenn sie andere Geräte, Eingabemethoden oder Wahrnehmungsvoraussetzungen nutzen.
Ein automatischer Check ist dafür ein guter Anfang. Er findet wiederkehrende Muster schnell: fehlende Alternativtexte, problematische Kontraste, unklare Formularbeschriftungen oder eine unstimmige Überschriftenstruktur. Er erkennt aber nicht zuverlässig, ob die gesamte Nutzung wirklich verständlich ist.
Was bedeutet Barrierefreiheit bei Websites?
Barrierefreiheit beschreibt eine Nutzung ohne unnötige Hürden. Dazu gehören Menschen mit dauerhaften Einschränkungen, aber auch Situationen wie ein helles Display, eine laute Umgebung, eine langsame Verbindung, eine verletzte Hand oder wenig Erfahrung mit dem Web.
Die Web Content Accessibility Guidelines (WCAG) ordnen Anforderungen entlang vier Prinzipien: wahrnehmbar, bedienbar, verständlich und robust. Diese Prinzipien sind hilfreicher als eine lose Liste einzelner Designregeln, weil sie die gesamte Nutzung im Blick behalten.
Die wichtigsten Prüffelder
1. Kontrast und Lesbarkeit
Text muss sich ausreichend vom Hintergrund abheben. Das betrifft nicht nur große Überschriften, sondern auch kleine Metadaten, Platzhalter, Links und Zustandsanzeigen. Ein blasser Grauton kann im Design ruhig wirken und bei schwachem Display trotzdem kaum lesbar sein.
Prüfe außerdem, ob Informationen ausschließlich über Farbe vermittelt werden. Ein roter Rahmen an einem fehlerhaften Feld sollte mit einer verständlichen Meldung und einer klaren Beziehung zum Feld ergänzt werden.
2. Alternativtexte und dekorative Bilder
Ein Bild braucht keinen langen Text, nur weil es ein Bild ist. Der Alternativtext sollte die Funktion des Bildes im Kontext übernehmen. Ein Referenzfoto braucht möglicherweise eine kurze Einordnung. Ein rein dekoratives Element sollte von assistiven Technologien ignoriert werden.
Frage bei jedem Bild:
- Trägt es eine Information?
- Ist es ein Link oder Teil eines Buttons?
- Wiederholt der Text daneben bereits dieselbe Aussage?
- Würde das Weglassen die Entscheidung des Besuchers verändern?
3. Überschriften und Struktur
Eine klare H1, sinnvolle H2 und logisch verschachtelte H3 helfen beim Lesen, aber auch bei Navigation mit assistiven Technologien. Überschriften sollten nicht nur nach ihrer optischen Größe gewählt werden. Eine kleinere Darstellung kann trotzdem strukturell eine H2 sein.
Auch main, nav, header und footer schaffen Orientierung. Mehrere
gleichartige Bereiche sollten verständlich benannt werden, damit Menschen
zwischen Navigation, Inhalt und ergänzenden Informationen unterscheiden können.
4. Tastatur und Fokus
Jede wichtige Funktion sollte ohne Maus erreichbar sein. Dazu gehören Menüs, Formulare, Akkordeons, Dialoge und Links. Der sichtbare Fokus muss erkennbar bleiben. Wenn ein Element per Tastatur erreicht wird, sollte klar sein, wo die Aktion gerade stattfinden würde.
Ein häufiger Fehler ist ein schöner Hover-Zustand ohne gleichwertigen Focus-Zustand. Ein anderer: Ein visuell verborgenes Menü bleibt für die Tastatur offen oder in einer unlogischen Reihenfolge erreichbar.
5. Formulare und Fehlermeldungen
Formulare sind oft der wichtigste Conversion-Punkt einer B2B-Website. Jedes Feld braucht ein sichtbares oder programmatisch verbundenes Label. Pflichtfelder, Formatfehler und erfolgreiche Übermittlung sollten klar kommuniziert werden.
Eine Fehlermeldung wie „Ungültige Eingabe“ hilft wenig. Besser ist eine konkrete Erklärung: „Bitte gib eine geschäftliche E-Mail-Adresse im Format name@unternehmen.de ein.“ Die Meldung sollte dem betroffenen Feld zugeordnet sein und nicht nur oben auf der Seite auftauchen.
6. Sprache und Verständlichkeit
Barrierefreiheit endet nicht beim HTML. Lange Sätze, unklare Fachbegriffe und ein fehlender nächster Schritt erschweren die Nutzung. Schreibe für die Entscheidung, die jemand treffen soll. Erkläre Abkürzungen beim ersten Auftreten und verwende Linktexte, die das Ziel benennen.
Was automatische Tools zuverlässig unterstützen
Automatisierte Prüfungen sind stark bei Regeln, die aus dem ausgelieferten Code und der sichtbaren Seite ableitbar sind. Ein Website-Check kann zum Beispiel auf fehlende Alternativtexte, auffällige Kontraste, leere Links, problematische Überschriften oder bestimmte Formularsignale hinweisen.
Damit entsteht eine wertvolle erste Liste. Sie sollte nicht als Endergebnis, sondern als Startpunkt für die Priorisierung gelesen werden.
Was du manuell testen musst
Automatische Regeln können nicht sicher beurteilen, ob eine Aufgabe in ihrer gesamten Abfolge verständlich ist. Plane deshalb einen kurzen manuellen Durchlauf ein:
- Öffne die Seite ohne Maus und navigiere nur mit Tab, Shift+Tab, Enter und Escape.
- Prüfe, ob der Fokus sichtbar bleibt und in einer sinnvollen Reihenfolge wandert.
- Vergrößere den Text und kontrolliere, ob Inhalte abgeschnitten oder überlagert werden.
- Schalte Bilder aus oder nutze eine Vorlesefunktion, um die Informations- reihenfolge grob zu beurteilen.
- Sende ein Formular mit absichtlich falschen und unvollständigen Angaben.
- Prüfe mobile Bedienung mit ausreichend großen und klar getrennten Interaktionsflächen.
Dieser Ablauf ist kein Ersatz für einen spezialisierten Accessibility-Audit. Er zeigt aber schnell, ob grundlegende Hürden im Alltag übersehen wurden.
Barrierefreiheit und Conversion gehören zusammen
Klare Struktur, gute Labels und verständliche Fehlertexte helfen nicht nur Menschen mit Behinderung. Sie helfen auch Besuchern auf dem Smartphone, unter Zeitdruck oder mit wenig Vorwissen. Das gilt besonders für B2B-Formulare, deren Felder oft unnötig kompliziert sind.
Ein barrierearmes Formular macht die Anfrage nicht automatisch besser. Es reduziert aber vermeidbare Abbrüche und schafft einen faireren Zugang. Deshalb ist Barrierefreiheit nicht bloß ein Compliance-Thema, sondern Teil guter Informations- und Interface-Qualität.
Eine praktische Priorisierung
Wenn eine Website viele Befunde hat, arbeite in dieser Reihenfolge:
| Priorität | Beispiele | Warum zuerst? |
|---|---|---|
| Hoch | Tastaturblockade, unsichtbarer Fokus, unbedienbares Formular | Eine Aufgabe ist nicht abschließbar. |
| Hoch | Fehlender Kontrast bei wichtigen Texten oder Aktionen | Inhalte und nächste Schritte werden nicht zuverlässig wahrgenommen. |
| Mittel | Fehlende oder falsche Alternativtexte bei informativen Bildern | Kontext geht für einen Teil der Nutzer verloren. |
| Mittel | Unklare Überschriften- oder Landmark-Struktur | Navigation und Orientierung werden langsamer. |
| Laufend | Sprache, Fehlermeldungen und redaktionelle Details | Verständlichkeit verbessert sich mit jedem Review. |
Die konkrete Einstufung hängt vom Inhalt und der Aufgabe ab. Ein fehlendes Alternativattribut an einem dekorativen Hintergrund ist anders zu bewerten als ein Bild, das die Funktionsweise eines Produkts erklärt.
Häufige Fragen zur Website-Barrierefreiheit
Reicht ein automatischer Barrierefreiheits-Check?
Nein. Er findet wichtige technische Muster, kann aber keine vollständige Nutzung bewerten. Kombiniere ihn mit Tastatur-, Zoom-, Formular- und Verständlichkeitstests.
Ist jede Website gesetzlich gleich betroffen?
Die rechtliche Einordnung hängt unter anderem von Angebot, Zielgruppe, Unternehmensrolle und anwendbaren Vorschriften ab. Ein technischer Check ist keine Rechtsberatung. Für eine verbindliche Bewertung solltest du fachliche Beratung einbeziehen.
Muss jede Website eine perfekte WCAG-Konformität erreichen?
Das Ziel sollte eine robuste, zugängliche Nutzung sein. Welche Kriterien, Nachweise und Prioritäten gelten, hängt vom konkreten Projekt ab. Beginne mit Blockaden und wichtigen Aufgaben, dokumentiere Entscheidungen und verbessere kontinuierlich.
Warum ist der Kontrast auf meinem Monitor trotzdem lesbar?
Displays, Licht, Sehvermögen und Einstellungen unterscheiden sich. Ein Kontrasttest schafft eine objektivere Basis als der Eindruck auf einem einzigen Bildschirm.
Fazit
Website-Barrierefreiheit lässt sich gut mit einem automatischen Check starten, aber nicht auf einen Score reduzieren. Prüfe sichtbare Muster maschinell, teste die wichtigsten Aufgaben manuell und priorisiere Hürden, die Menschen am Wahrnehmen oder Abschließen hindern.