Wissen / Artikel

Website auf Barrierefreiheit testen: mit Tools und manuell, Schritt fuer Schritt

Wenn du wissen willst, ob deine Website wirklich barrierefrei ist, reicht ein einzelnes Tool nicht aus. Automatische Scanner finden je nach Quelle nur einen Teil der tatsaechlichen Probleme – den Rest deckst du nur durch manuelle Pruefung auf. Dieser Leitfaden zeigt dir beide Wege: erst die schnellen Tool-Checks, dann die manuelle Pruefung, die den Unterschied macht. Wir testen Barrierefreiheit nicht nur bei Kundenprojekten, sondern betreiben sieben eigene Marken in Produktion – darunter einen Barrierefreiheits-Scanner. Die folgenden Schritte sind also Praxis, kein Lehrbuch.

Warum automatische Tools nur die halbe Wahrheit sind

Automatische Prueftools sind nuetzlich, weil sie in Sekunden technische Fehler finden: fehlende Alt-Texte, zu schwache Farbkontraste, fehlende Formular-Beschriftungen, kaputte HTML-Struktur. Was sie nicht koennen, ist Bedeutung beurteilen. Ein Tool sieht, dass ein Bild einen Alt-Text hat – ob dieser Alt-Text das Bild sinnvoll beschreibt, kann es nicht wissen. Genauso wenig erkennt es, ob die Tab-Reihenfolge logisch ist oder ob ein Video Untertitel braucht. Faustregel: Ein sauberer Tool-Report bedeutet nicht barrierefrei, sondern nur keine offensichtlichen technischen Fehler.

Schritt 1: Schneller Tool-Check

Starte mit kostenlosen, etablierten Werkzeugen. Diese drei decken einen Grossteil der automatisch pruefbaren Punkte ab:

WAVE (wave.webaim.org) – markiert Fehler direkt visuell auf der Seite, ideal fuer den ersten Ueberblick.
axe DevTools – Browser-Erweiterung fuer Chrome und Firefox, sehr praezise, wenige Fehlalarme.
Lighthouse – in Chrome bereits eingebaut (DevTools → Tab Lighthouse), liefert einen Accessibility-Score plus konkrete Hinweise.

Pruefe nicht nur die Startseite. Teste mindestens je eine Seite pro Vorlagentyp: Startseite, eine Unterseite, ein Formular (Kontakt oder Checkout), und falls vorhanden einen Blog-Artikel. Notiere die wiederkehrenden Fehler – oft steckt eine Ursache im Template und betrifft hunderte Seiten gleichzeitig.

Schritt 2: Mit der Tastatur navigieren

Das ist der wichtigste manuelle Test – und er kostet nichts. Klick einmal in die Adressleiste, dann bedien die ganze Seite nur mit der Tastatur:

Tab springt vorwaerts, Shift+Tab zurueck durch alle Links, Buttons und Formularfelder.
Enter und Leertaste loesen Aktionen aus, mit den Pfeiltasten bedienst du Auswahllisten und Slider.

Achte dabei auf drei Dinge: Ist immer sichtbar, wo du gerade bist (deutlicher Fokus-Rahmen)? Ist die Reihenfolge logisch und folgt dem Lesefluss? Kommst du ueberall hin und auch wieder weg – besonders aus Menues, Pop-ups und Cookie-Bannern? Bleibst du in einem Element haengen oder ist der Fokus unsichtbar, hast du ein echtes Problem gefunden, das kein Scanner zuverlaessig meldet.

Schritt 3: Mit einem Screenreader hoeren

Du brauchst keine teure Software. Unter Windows ist der Narrator eingebaut (Strg+Win+Enter), kostenlos und sehr verbreitet ist NVDA, auf dem Mac liegt VoiceOver bereit (Cmd+F5). Schliess die Augen und hoer dir zu, wie die Seite vorgelesen wird. Gute Fragen dabei:

Werden Bilder sinnvoll beschrieben – oder nur als Bild oder mit dem Dateinamen vorgelesen?
Sind Ueberschriften als Ueberschriften erkennbar, sodass du per Tastenkuerzel springen kannst?
Werden Formularfelder klar benannt (Vorname, E-Mail) statt nur Eingabefeld?
Werden Fehlermeldungen und Statushinweise tatsaechlich angesagt?

Anfangs ist das ungewohnt, doch schon zehn Minuten zeigen dir, wie deine Seite fuer blinde Nutzer klingt.

Schritt 4: Farben, Kontrast und Zoom pruefen

Stell deinen Browser-Zoom auf 200 Prozent: Bleibt alles lesbar, oder ueberlappt Text und verschwindet hinter Raendern? Schalt testweise auf Graustufen, um zu sehen, ob Informationen allein ueber Farbe transportiert werden – etwa rote Pflichtfelder ohne zusaetzliches Sternchen oder Text. Den Kontrast von Text zu Hintergrund pruefst du mit dem Kontrast-Checker von WebAIM; als Mindestwert gilt 4,5:1 fuer normalen Text.

Was die Tools dir nicht abnehmen

Manche Punkte erfordern Urteilsvermoegen: Sind Link-Texte aussagekraeftig (mehr Infos statt hier klicken)? Ist die Sprache verstaendlich? Haben Videos Untertitel? Diese inhaltlichen Fragen sind oft die letzten zehn Prozent – und genau die, die ueber echte Nutzbarkeit entscheiden.

Ehrlich gesagt: Fuer eine einfache, sauber gebaute Website kommst du mit den Schritten 1 bis 4 erstaunlich weit, oft ganz ohne externe Hilfe. Wird es komplexer – ein Shop, ein Buchungssystem, ein interaktives Dashboard – oder steht das Thema wegen des Barrierefreiheitsstaerkungsgesetzes (BFSG) auf deiner Pflichtliste, lohnt eine strukturierte Pruefung entlang der WCAG-Kriterien. Wir bauen Webseiten und Tools von Anfang an so, dass diese Tests sauber durchlaufen – weil nachtraegliches Reparieren immer teurer ist als von Beginn an mitgedachte Barrierefreiheit.

Brauchst du selbst eine Website, ein Tool oder eine SaaS?

Wir bauen sie zum Festpreis - vom Team, das sieben eigene Marken live betreibt. Klarer Scope, klarer Preis, klarer Zeitrahmen.

Projekt starten Leistungen & Preise

Formulare und Fehlermeldungen gezielt prüfen

Formulare sind eine der häufigsten Stolperstellen, weil hier Menschen mit Behinderung besonders oft aufgeben. Prüfe zuerst, ob jedes Eingabefeld ein sichtbares, eindeutig zugeordnetes Label hat - ein Platzhaltertext allein reicht nicht, weil er verschwindet, sobald jemand zu tippen beginnt. Reiche das Formular absichtlich mit einem Fehler ein, etwa einer ungültigen E-Mail-Adresse, und beobachte, was passiert: Wird der Fokus zum fehlerhaften Feld geführt, wird die Fehlermeldung von einem Screenreader vorgelesen, oder verändert sich lediglich die Farbe eines Rahmens, die ein blinder Nutzer nie wahrnimmt?

Pflichtfelder sollten zusätzlich zur Farbe auch textlich oder über ein beschriftetes Sternchen markiert sein. Bei mehrstufigen Formularen wie einem Checkout lohnt sich zusätzlich der Test, ob der aktuelle Schritt klar erkennbar ist und ob ein Zurückspringen ohne Datenverlust möglich bleibt. Formulare sind der Punkt, an dem sich automatische Prüfung und tatsächliche Nutzbarkeit am weitesten auseinanderbewegen.

Befunde ordnen: was zuerst behoben wird

Nach den ersten vier Schritten hast du meist mehr Befunde gesammelt, als sich sofort beheben lassen - deshalb lohnt sich eine bewusste Reihenfolge. Am dringendsten sind Probleme, die eine Aufgabe komplett unmöglich machen: ein Login, der sich per Tastatur nicht bedienen lässt, oder ein Kontaktformular ohne erkennbare Fehlermeldung. Solche Blocker verhindern, dass Menschen dein Angebot überhaupt nutzen können, und gehören immer an die erste Stelle.

Danach folgen Probleme, die eine Aufgabe zwar erschweren, aber nicht komplett verhindern - etwa ein schwacher, aber nicht unlesbarer Kontrast. Am Ende stehen kleinere Unsauberkeiten wie ein fehlender Alt-Text bei einem rein dekorativen Bild, die zwar korrekt behoben werden sollten, aber niemanden an der eigentlichen Nutzung hindern. Ein einfaches Raster mit den Spalten Fundstelle, Problem, betroffene Nutzergruppe und Schweregrad reicht aus, um aus einer langen Fehlerliste einen bearbeitbaren Plan zu machen, statt vor der schieren Menge zu resignieren. Wiederkehrende Befunde, die aus demselben Template stammen, behebst du am besten an einer zentralen Stelle im Code, statt jede betroffene Seite einzeln nachzubessern. So verwandelt sich ein Fund, der auf hundert Seiten gleichzeitig auftaucht, in eine einzige Korrektur statt in hundert einzelne Aufgaben.

Häufig gestellte Fragen

Muss ich als kleines Unternehmen überhaupt barrierefrei sein?

Je nach Angebot und Zielgruppe kann eine rechtliche Pflicht bestehen, etwa über das Barrierefreiheitsstärkungsgesetz. Unabhängig davon lohnt sich Barrierefreiheit, weil sie deine Seite für mehr Menschen tatsächlich nutzbar macht.

Wie oft sollte ich die Barrierefreiheit erneut prüfen?

Am sinnvollsten nach jeder größeren Änderung am Design oder an zentralen Funktionen wie Formularen oder Navigation. Kleine inhaltliche Änderungen erfordern in der Regel keine komplette neue Prüfung.

Reicht ein automatisches Tool wie Lighthouse allein aus?

Nein. Solche Tools finden zuverlässig technische Fehler wie fehlende Alt-Texte, aber keine Bedeutungs- oder Logikprobleme wie eine verwirrende Tab-Reihenfolge. Die manuelle Prüfung aus diesem Leitfaden bleibt dafür nötig.

Was kostet eine professionelle Barrierefreiheitsprüfung?

Das hängt stark vom Umfang der Seite und der Tiefe der Prüfung ab. Für eine einfache Website kommst du, wie im Artikel beschrieben, mit den eigenen Schritten oft schon sehr weit.

Brauche ich Testnutzer mit tatsächlicher Behinderung?

Für eine tiefere Prüfung sind solche Rückmeldungen sehr wertvoll, weil sie Erfahrungen zeigen, die sich mit Tools und eigener manueller Prüfung nicht vollständig ersetzen lassen. Für den Einstieg reicht die eigene Prüfung aber meist aus.

Welche Browser-Erweiterungen helfen zusätzlich beim Testen?

Neben den im Leitfaden genannten Tool-Checks helfen Erweiterungen, die Kontraste, Struktur und ARIA-Attribute direkt im Browser sichtbar machen. Sie ersetzen die manuelle Tastatur- und Screenreader-Prüfung aber nicht.

Was ist der häufigste Fehler, den ihr bei Kundenprojekten seht?

Am häufigsten fehlt ein sichtbarer Fokus-Rahmen bei der Tastaturnavigation oder ein Formularfeld ist nicht sauber mit seinem Label verknüpft. Beides fällt in automatischen Tests oft nicht auf, aber sofort bei der manuellen Prüfung.