WAVE: WebAIMs kostenloses Tool für visuelle Barrierefreiheits-Prüfung

WAVE ist seit über 20 Jahren eines der beliebtesten Werkzeuge für schnelle Barrierefreiheits-Checks. Sein Alleinstellungsmerkmal: Statt einer abstrakten Fehlerliste blendet WAVE Icons direkt an den betroffenen Stellen der Webseite ein. Damit sehen auch Nicht-Entwickler sofort, wo Probleme liegen – ideal für Content-Redakteure, Designer und Projektmanager.

Was ist WAVE und wie funktioniert es?

WAVE wird von WebAIM (Web Accessibility In Mind) entwickelt, einer Non-Profit-Organisation der Utah State University. Das Tool gibt es in drei Varianten: als Online-Dienst unter wave.webaim.org, als Browser-Extension für Chrome, Firefox und Edge sowie als API für automatisierte Massenprüfungen.

Die Funktionsweise ist denkbar einfach: Man ruft eine Webseite auf, startet WAVE – und das Tool blendet farbige Icons direkt in die Seite ein. Rote Icons markieren Fehler (Errors), gelbe Icons sind Warnungen (Alerts), grüne Icons zeigen korrekt umgesetzte A11y-Features. Zusätzlich gibt es Tabs für Strukturanalyse, Kontrast-Prüfung und die Seitenstruktur (Überschriften, Landmarks, ARIA-Rollen). WAVE arbeitet clientseitig – die Seite verlässt den Browser nicht, was datenschutzrechtlich vorteilhaft ist.

Fehler, Warnungen und Features verstehen

WAVE unterscheidet drei Hauptkategorien:

Errors (Fehler) sind eindeutige WCAG-Verstöße: fehlende Alt-Texte, fehlende Formular-Labels, leere Überschriften, leere Links oder fehlende Dokumentsprache. Jeder Error muss behoben werden, um WCAG-Konformität zu erreichen.

Alerts (Warnungen) sind potenzielle Probleme, die menschliche Überprüfung erfordern: verdächtig kurze Alt-Texte, redundante Links, mögliche Überschriften, die nicht als solche ausgezeichnet sind, oder Skip-Links die fehlen könnten. Nicht jede Warnung ist ein tatsächlicher Fehler, aber jede sollte geprüft werden.

Features sind positiv erkannte Barrierefreiheits-Merkmale: vorhandene Alt-Texte, korrekte Labels, Sprachdeklaration, ARIA-Landmarks. Sie dienen als Bestätigung, dass bestimmte Aspekte korrekt umgesetzt sind.

Der Kontrast-Tab

WAVE enthält einen eigenen Kontrast-Checker, der alle Text-Hintergrund-Kombinationen auf der Seite analysiert. Er prüft sowohl das WCAG-2.1-AA-Verhältnis von 4.5:1 für Normaltext als auch das Verhältnis von 3:1 für großen Text (ab 18 pt bzw. 14 pt fett). Kontrastverletzungen werden mit eigenen Icons markiert und sind im Detail-Panel aufgeschlüsselt.

Besonders nützlich: Der Kontrast-Tab zeigt auch Elemente an, deren Kontrast nicht automatisch bestimmt werden kann – etwa Text auf Hintergrundbildern oder bei CSS-Gradients. Diese werden als "Contrast Warning" gekennzeichnet und erfordern manuelle Prüfung. Für eine vertiefte Analyse einzelner Farbkombinationen empfiehlt sich der Colour Contrast Analyser als Desktop-Tool.

Stärken und Grenzen von WAVE

Die größte Stärke von WAVE ist die visuelle Darstellung. Während andere Tools abstrakte Listen ausgeben, zeigt WAVE die Probleme im Kontext der Seite. Das macht es ideal für Schulungen, Stakeholder-Präsentationen und den schnellen Überblick. Auch die Strukturanalyse – die Überschriftenhierarchie und Landmark-Struktur auf einen Blick zeigt – ist hervorragend.

Grenzen: WAVE prüft immer nur eine einzelne Seite und erfasst keine dynamischen Zustände (Modals, Formulare nach Absenden, JavaScript-basierte Inhaltsänderungen). Es gibt keine native CI/CD-Integration. Die API ist kostenpflichtig und für Massentests gedacht. Zudem deckt WAVE – wie alle automatisierten Tools – nur einen Teil der WCAG-Kriterien ab. Ein vollständiger Audit erfordert immer ergänzende manuelle Tests und Screenreader-Prüfung.

WAVE im Vergleich zu anderen Tools

Im Vergleich zu axe DevTools ist WAVE visueller, aber weniger technisch tiefgehend. axe liefert detailliertere Code-Hinweise und lässt sich in Testframeworks einbinden – WAVE nicht. Im Vergleich zu Lighthouse bietet WAVE mehr Detailtiefe bei der Analyse, während Lighthouse einen Score-Überblick liefert.

Die ideale Strategie: WAVE für den schnellen visuellen Check und die Kommunikation mit Nicht-Entwicklern, axe DevTools für die detaillierte Entwickler-Analyse und CI/CD-Integration, Lighthouse für den regelmäßigen Score-Vergleich. Die Tools ergänzen sich und sollten nicht als Alternativen betrachtet werden.