WAVE-Tool: Anleitung zur Barrierefreiheitsprüfung

WAVE (Web Accessibility Evaluation Tool) ist eine kostenlose Browser-Erweiterung des amerikanischen Instituts WebAIM. Sie prüft die aktuell geöffnete Seite direkt im Browser und markiert Probleme mit farbigen Icons genau an der Stelle im Layout, an der sie auftreten - ohne separaten Report, den du erst zuordnen musst.

Für Betreiber, die vor einem BFSG-Audit einen schnellen ersten Überblick brauchen, ist WAVE oft der einfachste Einstieg. Dieser Leitfaden zeigt die Installation, wie du die Icons im Report liest, wo WAVE an seine Grenzen stößt und wie du die gefundenen Probleme sinnvoll abarbeitest.

Was WAVE prüft und wofür es sich eignet

WAVE untersucht den gerenderten HTML-Code einer Seite auf fehlende Alt-Texte, unzureichende Überschriftenstruktur, leere Links, fehlende Formular-Labels und weitere strukturelle Probleme, die WCAG-Kriterien verletzen. Die Analyse läuft vollständig im Browser, es werden keine Seiteninhalte an einen fremden Server übertragen.

Das Tool eignet sich besonders für schnelle Vorab-Checks einzelner Seiten - Startseite, Produktseite, Kontaktformular - bevor ein vollständiges Audit ansteht. Es ersetzt keine Prüfung mit einem echten Screenreader, liefert aber in wenigen Minuten einen belastbaren ersten Eindruck vom Zustand der Seite.

Auch für Redaktionen ist WAVE praktisch: Vor der Veröffentlichung eines neuen Blogartikels oder einer Landingpage lässt sich in unter einer Minute prüfen, ob Bilder Alt-Texte haben und die Überschriftenhierarchie stimmt, bevor der Beitrag online geht.

Gerade bei Online-Shops mit häufig wechselndem Sortiment lohnt sich ein wiederkehrender WAVE-Check neuer Produktseiten, da hier erfahrungsgemäß am häufigsten Bilder ohne Alt-Text, fehlerhafte Formularfelder oder falsch verschachtelte Überschriften neu entstehen, ohne dass es jemandem auffällt.

Installation der WAVE-Erweiterung in Chrome, Firefox und Edge

Die Erweiterung steht kostenlos im Chrome Web Store, im Firefox Add-on-Store und für Microsoft Edge zur Verfügung. Suche dort nach "WAVE Evaluation Tool" von WebAIM und installiere sie wie jede andere Browser-Erweiterung.

Nach der Installation erscheint ein kleines WAVE-Symbol in der Symbolleiste des Browsers. Öffne die zu prüfende Seite und klicke auf das Symbol - WAVE analysiert die Seite direkt im Browserfenster und blendet die Ergebnisse als Overlay über der Seite ein.

Bei sehr umfangreichen Seiten mit vielen hundert Elementen kann das Laden des Overlays einen Moment dauern - das ist normal und kein Hinweis auf einen Fehler der Erweiterung selbst.

Den WAVE-Report lesen: Icons für Fehler, Warnungen und Kontrast

Der WAVE-Report unterscheidet mehrere Icon-Kategorien: Rote Icons markieren Fehler, etwa fehlende Alt-Texte oder leere Buttons. Gelbe Icons markieren Warnungen, etwa leere Überschriften oder verdächtige Linktexte wie "hier klicken", die für Screenreader-Nutzer wenig Orientierung bieten.

Grüne Icons zeigen bereits vorhandene Accessibility-Features an, etwa korrekt gesetzte ARIA-Landmarks oder Sprungmarken. Ein eigenes Kontrast-Icon listet alle Textstellen mit unzureichendem Farbkontrast auf, inklusive der gemessenen Kontrastwerte im Vergleich zum geforderten Mindestwert.

In der Seitenleiste kannst du zwischen "Summary", "Details" und "Outline" wechseln. Die Outline-Ansicht zeigt die Überschriftenstruktur der Seite - ein guter erster Check, ob H1 bis H3 logisch aufeinander aufbauen und keine Ebene übersprungen wird.

Schritt für Schritt: Eine reale Seite mit WAVE prüfen

Öffne die Startseite deines Shops und starte WAVE. Sieh dir zunächst die Zusammenfassung an: Jede Zahl über null bei den roten Fehler-Icons bedeutet konkreten Handlungsbedarf, den du nicht ignorieren solltest.

Klicke jedes Fehler-Icon einzeln an: WAVE öffnet einen Infokasten mit Erklärung und häufig einem Link zur betroffenen WCAG-Regel. Notiere dir die betroffenen Elemente in einer einfachen Liste mit HTML-Ausschnitt, Seite und gefundenem Problem.

Wiederhole den Vorgang für Kontaktformular, Warenkorb und mindestens eine Produktseite. Diese vier Seitentypen decken erfahrungsgemäß die meisten strukturellen Probleme eines Shops oder einer Website ab und liefern ein repräsentatives Bild.

Speichere die Ergebnisse jedes Durchlaufs mit Datum in einer einfachen Tabelle oder Textdatei ab. So kannst du im Zeitverlauf nachvollziehen, ob sich die Anzahl der Fehler nach vorgenommenen Anpassungen tatsächlich verringert hat, statt dich nur auf einen einmaligen Eindruck zu verlassen.

WAVE im Vergleich zu axe DevTools und Google Lighthouse

axe DevTools von Deque nutzt eine Regel-Engine, die auch viele automatisierte Scanner einsetzen, und liefert präzisere, entwicklerorientierte Fehlermeldungen mit Code-Referenz. WAVE ist visueller aufgebaut und für Nicht-Entwickler oft leichter lesbar. Details dazu im axe-DevTools-Leitfaden.

Google Lighthouse, in die Chrome-DevTools integriert, gibt einen einzelnen Prozent-Score aus, ohne Probleme direkt im Seitenlayout zu markieren. Wie der Score zustande kommt und was er nicht zeigt, erklärt der Lighthouse-Artikel.

Sinnvoll ist meist die Kombination: WAVE für den schnellen visuellen Überblick, axe für technische Details während der Entwicklung, Lighthouse als grobe Kennzahl über die Zeit. Einen strukturierten Vergleich aller Tools findest du in der Tool-Übersicht.

Grenzen von WAVE bei dynamischen Inhalten

WAVE analysiert den DOM zum Zeitpunkt des Klicks. Inhalte, die erst nach einer Nutzerinteraktion nachgeladen werden - Dropdown-Menüs, Modals, unendliches Scrollen - werden nur erfasst, wenn sie beim Scan bereits sichtbar sind.

Bei Single-Page-Applications mit React, Angular oder Vue kann es nötig sein, WAVE nach jeder Zustandsänderung erneut auszuführen, etwa nach dem Öffnen eines Warenkorb-Overlays. Ein einmaliger Scan der Startseite genügt hier nicht, um alle Zustände abzudecken.

Als Faustregel gilt: Scanne jeden sichtbaren Zustand einer Komponente einzeln - geschlossenes und geöffnetes Menü, leeren und gefüllten Warenkorb, Formular vor und nach einer Fehlermeldung.

Gefundene Probleme priorisieren

Beginne mit roten Fehler-Icons - sie verletzen WCAG-Kriterien direkt und sind meist die rechtlich relevantesten Punkte. Kontrastfehler auf Call-to-Action-Buttons und in Formularen wirken sich zudem unmittelbar auf die Conversion aus.

Warnungen (gelb) sind oft mit geringerem Aufwand zu beheben, aber nicht immer dringend. Arbeite sie nach den Fehlern ab und dokumentiere behobene Punkte für deine Barrierefreiheitserklärung.

Halte pro gefundenem Fehler fest, wer ihn behebt und bis wann - eine einfache Tabelle mit den Spalten Seite, Problem, Verantwortlich und Status reicht dafür in den meisten Fällen aus.

Plane realistische Fristen ein: Kontrastfehler und fehlende Alt-Texte lassen sich oft innerhalb weniger Tage beheben, während strukturelle Änderungen an Navigation oder Formularlogik mehr Abstimmung mit Entwicklung oder Agentur benötigen und entsprechend mehr Vorlauf brauchen.

Hinweis: Dieser Artikel ersetzt keine rechtliche Beratung. Tool-Ergebnisse sind eine erste Orientierung und keine vollständige BFSG-Konformitätsprüfung.

Häufig gestellte Fragen