Eine Website auf Barrierefreiheit zu überprüfen klingt zunächst kompliziert.

HTML analysieren, WCAG-Kriterien verstehen, Screenreader einsetzen, Kontraste berechnen – wer sich zum ersten Mal damit beschäftigt, weiß oft gar nicht, wo er anfangen soll.

Genau für diesen Einstieg ist WAVE ziemlich praktisch.

WAVE ist ein Accessibility-Prüftool, das eine Website analysiert und mögliche Barrierefreiheitsprobleme direkt auf der Seite markiert. Statt nur eine lange technische Fehlerliste auszugeben, zeigt das Tool bei vielen Problemen unmittelbar, welches Element betroffen ist.

Das macht WAVE besonders interessant für:

• WordPress-Nutzer,
• Webdesigner,
• Agenturen,
• Shopbetreiber,
• Entwickler,
• Betreiber kleiner Unternehmenswebsites.

Du musst nicht sofort jedes WCAG-Kriterium auswendig kennen, um mit WAVE erste Probleme zu entdecken.

Allerdings gilt auch hier eine wichtige Regel:

WAVE kann Barrieren finden – aber WAVE kann nicht abschließend entscheiden, ob deine Website vollständig barrierefrei ist.

In dieser Anleitung schauen wir uns deshalb nicht nur an, wie das Tool funktioniert. Ich zeige dir auch, wie du die Ergebnisse richtig interpretierst und welche Tests danach noch folgen sollten.

Was ist WAVE?

WAVE ist ein Werkzeug zur Überprüfung der digitalen Barrierefreiheit von Webseiten.

Nach dem Start analysiert es die aktuell angezeigte Seite und ergänzt sie um verschiedene Symbole und Hinweise.

So kannst du beispielsweise erkennen:

• Bilder ohne passende Alternativinformationen,
• problematische Formularfelder,
• Kontrastfehler,
• Überschriften,
• strukturelle Elemente,
• ARIA-Verwendungen,
• mögliche Accessibility-Probleme.

Dabei versucht WAVE nicht, die Website automatisch zu reparieren.

Das Tool zeigt dir lediglich, wo du genauer hinschauen solltest.

Das ist ein wichtiger Unterschied.

Warum WAVE für Einsteiger so angenehm ist

Viele technische Prüfprogramme zeigen Ergebnisse ungefähr so:

Element div > span:nth-child(3) violates rule xyz

Für einen Entwickler mag das hilfreich sein.

Als normaler Websitebetreiber fragt man sich dagegen schnell:

Welches Element ist überhaupt gemeint?

WAVE arbeitet viel visueller.

Es legt Hinweise direkt über die Website.

Ein fehlender Alt-Text wird beim entsprechenden Bild markiert.

Eine auffällige Überschrift erscheint an der tatsächlichen Position.

Ein Formularproblem befindet sich direkt beim betroffenen Formular.

Dadurch kann man deutlich leichter verstehen, wo der Fehler entstanden ist.

Online-Version oder Browser-Erweiterung?

WAVE lässt sich auf verschiedene Arten nutzen.

Für den schnellen Einstieg gibt es die Online-Version.

Daneben steht eine Browser-Erweiterung zur Verfügung.

Beide haben ihren Zweck.

WAVE Online-Version

Bei der Online-Prüfung gibst du die Adresse einer öffentlich erreichbaren Website ein.

Danach wird die Seite analysiert und mit den entsprechenden Hinweisen dargestellt.

Das eignet sich gut für:

• öffentlich erreichbare Startseiten,
• Blogartikel,
• normale Unterseiten,
• einen ersten Schnelltest.

Wer WAVE einfach einmal ausprobieren möchte, kann damit gut anfangen.

WAVE Browser-Erweiterung

Für regelmäßige Tests würde ich eher die Browser-Erweiterung verwenden.

Sie kann direkt die Seite untersuchen, die gerade in deinem Browser geöffnet ist.

Das hat einen großen Vorteil:

Du kannst auch Inhalte prüfen, die ein öffentliches Online-Tool nicht ohne Weiteres erreichen würde.

Zum Beispiel:

• Kundenkonto,
• Checkout,
• eingeloggte Bereiche,
• Entwicklungsumgebung,
• interne Seiten,
• dynamische Inhalte,
• Seiten hinter einem Passwort.

Gerade bei WooCommerce ist das sehr praktisch.

Denn eine öffentlich zugängliche Produktseite ist nur ein kleiner Teil des Shops.

Warenkorb, Checkout und Kundenkonto sind mindestens genauso wichtig.

Ist WAVE kostenlos?

Für die normale Prüfung einzelner Webseiten steht WAVE kostenlos zur Verfügung.

Für einen Websitebetreiber, der seine eigenen Seiten überprüfen möchte, reicht das normalerweise für einen sehr guten ersten Einstieg.

Daneben existieren professionelle und automatisierte Lösungen für umfangreichere Prüfungen.

Für unseren Selbsttest brauchen wir diese zunächst nicht.

WAVE installieren

Die Browser-Erweiterung steht für gängige Browser zur Verfügung.

Nach der Installation erscheint normalerweise ein WAVE-Symbol im Browser.

Danach funktioniert der Test sehr einfach:

1. Gewünschte Website öffnen.
2. WAVE-Erweiterung starten.
3. Kurz auf die Analyse warten.
4. Ergebnisse in der Seitenleiste und direkt auf der Website ansehen.

Die Seite sieht danach möglicherweise ziemlich bunt aus.

Überall erscheinen Symbole.

Das wirkt beim ersten Mal etwas überwältigend.

Keine Sorge.

Du musst nicht jedes Symbol sofort verstehen.

Was passiert beim Start von WAVE?

Nach der Analyse ergänzt WAVE die Website um verschiedene Hinweise.

Dabei werden nicht nur eindeutige Fehler dargestellt.

Das Tool zeigt auch:

• mögliche Probleme,
• vorhandene Accessibility-Funktionen,
• strukturelle Informationen,
• ARIA-Elemente.

Das ist wichtig.

Denn nicht jedes WAVE-Symbol bedeutet:

Hier ist etwas kaputt.

Manche Symbole liefern lediglich zusätzliche Informationen.

Deshalb sollte man die verschiedenen Kategorien unterscheiden.

Die wichtigsten WAVE-Kategorien verstehen

WAVE arbeitet mit mehreren Gruppen.

Besonders relevant sind:

• Errors
• Contrast Errors
• Alerts
• Features
• Structural Elements
• ARIA

Schauen wir sie uns einzeln an.

1. Errors: eindeutige Fehler

Errors sind die Kategorie, die du zuerst ansehen solltest.

Hier erkennt WAVE Probleme, die sich relativ eindeutig automatisch feststellen lassen.

Beispiele können sein:

• fehlende Alternativtexte,
• leere Links,
• fehlende Formularbeschriftungen,
• bestimmte strukturelle Fehler.

Ein Error sollte deshalb ernst genommen werden.

Aber auch hier gilt:

Nicht blind irgendeine technische Änderung durchführen.

Erst verstehen, welches Problem vorliegt.

Dann sinnvoll beheben.

2. Contrast Errors: Kontrastprobleme

WAVE kann verschiedene Farbkontraste untersuchen.

Ein klassisches Problem:

Hellgrauer Text auf weißem Hintergrund.

Oder:

Weiße Schrift auf einem sehr hellen Button.

Solche Kombinationen sehen in modernen Designs manchmal elegant aus, sind aber für viele Menschen schwer lesbar.

WAVE kann entsprechende Kontrastprobleme markieren.

Besonders häufig solltest du prüfen:

• Fließtext,
• Buttons,
• Links,
• Footer,
• Formularbeschriftungen,
• Fehlermeldungen,
• Produktpreise,
• Lieferinformationen.

Nicht nur die Startseite prüfen

Ein häufiger Fehler:

Startseite sieht gut aus.

Kontrast geprüft.

Fertig.

Im Checkout verwendet ein Plugin plötzlich hellgraue Labels.

Oder das Cookie-Banner verwendet weiße Schrift auf hellblauem Hintergrund.

Deshalb sollten unterschiedliche Seitentypen geprüft werden.

3. Alerts: Hier musst du selbst entscheiden

Alerts sind besonders interessant.

Ein Alert bedeutet nicht automatisch:

Fehler.

Es bedeutet eher:

Schau dir dieses Element genauer an.

WAVE kann manche Situationen technisch erkennen, aber nicht zuverlässig beurteilen, ob sie im konkreten Zusammenhang problematisch sind.

Genau hier kommt der Mensch ins Spiel.

Beispiel Alt-Text

Ein Bild besitzt vielleicht technisch einen Alt-Text.

WAVE kann ihn anzeigen.

Nun musst du entscheiden:

Ist dieser Alt-Text sinnvoll?

Schlecht

„Bild“

Ebenfalls schlecht

„IMG_2847“

Besser

„Schwarzer Wanderschuh mit orangefarbenen Schnürsenkeln und grober Profilsohle.“

Ob die dritte Beschreibung tatsächlich zum Bild und Kontext passt, kann nur ein Mensch vernünftig beurteilen.

4. Features: vorhandene Accessibility-Merkmale

WAVE zeigt nicht nur Probleme.

Es kann auch verschiedene vorhandene Funktionen beziehungsweise Eigenschaften markieren.

Das hilft dir dabei zu verstehen, welche Accessibility-Informationen bereits vorhanden sind.

Beispielsweise kannst du erkennen, welche Bilder einen Alt-Text besitzen.

Das ist besonders praktisch bei bestehenden Websites mit vielen Inhalten.

Du kannst damit schnell kontrollieren:

Was wird hier eigentlich technisch ausgegeben?

5. Structural Elements: Seitenstruktur untersuchen

Eine zugängliche Website braucht eine sinnvolle Struktur.

Dazu gehören unter anderem:

• Überschriften,
• Listen,
• Bereiche,
• Tabellen,
• weitere semantische Elemente.

WAVE hilft dabei, diese Struktur sichtbar zu machen.

Gerade Überschriften sind interessant.

Eine optisch große Schrift ist schließlich nicht automatisch eine echte HTML-Überschrift.

Und eine Überschrift kann technisch H4 sein, obwohl sie eigentlich direkt unter einer H1 steht.

Überschriften mit WAVE prüfen

Nehmen wir eine typische Seite:

H1: Website barrierefrei machen

Darunter:

H2: Warum Barrierefreiheit wichtig ist

H2: Die wichtigsten Maßnahmen

Darunter:

H3: Alt-Texte

H3: Tastaturbedienung

H3: Kontraste

Das ist nachvollziehbar.

Problematischer wäre:

H1

H5

H2

H6

H3

Die visuelle Darstellung kann trotzdem völlig normal aussehen.

WAVE hilft dabei, solche Strukturen schneller zu erkennen.

6. ARIA: technische Accessibility-Informationen

ARIA wird eingesetzt, um Hilfstechnologien zusätzliche Informationen über Benutzeroberflächen zu geben.

Zum Beispiel bei:

• Dialogfenstern,
• Tabs,
• Akkordeons,
• dynamischen Elementen,
• komplexen Buttons.

WAVE kann vorhandene ARIA-Informationen sichtbar machen und bestimmte Probleme erkennen.

Hier gilt allerdings:

ARIA ist kein automatischer Reparaturmechanismus.

Falsch eingesetztes ARIA kann eine Website sogar verschlechtern.

Wer in diesem Bereich Probleme findet und technisch nicht genau weiß, was die Attribute bedeuten, sollte nicht einfach wahllos neue ARIA-Angaben hinzufügen.

Die WAVE-Seitenleiste verstehen

Nach dem Start erscheint eine Seitenleiste mit den Ergebnissen.

Dort erhältst du einen Überblick über die gefundenen Elemente.

Das ist praktisch, weil eine umfangreiche Seite schnell Dutzende Hinweise enthalten kann.

Du kannst die einzelnen Gruppen nacheinander durchgehen.

Meine Reihenfolge wäre:

1. Errors
2. Contrast Errors
3. Alerts
4. Struktur
5. ARIA
6. zusätzliche Features

So bleibt die Analyse übersichtlich.

Details ansehen

Im Detailbereich kannst du einzelne Hinweise genauer untersuchen.

WAVE zeigt dir, welches Problem gefunden wurde und welches Element betroffen ist.

Das ist besonders hilfreich, wenn mehrere ähnliche Elemente auf einer Seite vorkommen.

Beispiel:

Du hast zwölf Produktbilder.

Ein Bild besitzt keinen Alt-Text.

Anstatt alle Bilder einzeln im WordPress-Backend zu kontrollieren, kannst du mit WAVE schneller sehen, welches Bild auffällig ist.

Symbole direkt auf der Website anklicken

Eine der praktischsten Funktionen ist die direkte Markierung innerhalb der Seite.

Wenn du ein WAVE-Symbol anklickst, bekommst du weitere Informationen zu diesem Element.

So entsteht ein sehr praktischer Arbeitsablauf:

Problem sehen.

Element identifizieren.

Ursache verstehen.

WordPress oder Code öffnen.

Problem beheben.

Seite neu laden.

WAVE erneut starten.

Der Code-Bereich

Für Entwickler gibt es zusätzlich die Möglichkeit, den zugrunde liegenden Code zu betrachten.

Dort lässt sich nachvollziehen, welches HTML zu einem WAVE-Hinweis gehört.

Das ist besonders hilfreich bei Problemen wie:

• fehlendem Label,
• leerem Link,
• ARIA-Fehler,
• falscher Überschrift.

Wenn du WordPress-Nutzer ohne Programmierkenntnisse bist, musst du diesen Bereich nicht ständig verwenden.

Bei komplizierten Problemen kann er deinem Entwickler aber helfen, die Ursache schneller zu finden.

WAVE für Alt-Texte verwenden

Alt-Texte gehören zu den wichtigsten Bereichen, die sich mit WAVE gut kontrollieren lassen.

Das Tool kann dir dabei helfen zu erkennen:

• ob Alt-Informationen vorhanden sind,
• welche Bilder auffällig sind,
• welche Texte technisch hinterlegt wurden.

Die eigentliche Qualitätskontrolle musst du allerdings selbst übernehmen.

Beispiel Produktbild

Bild:

Schwarzer Rucksack.

Alt-Text:

„Rucksack schwarz“

Das ist zumindest verständlich.

Vielleicht zeigt das Bild aber zusätzlich:

• zwei Seitentaschen,
• orange Reißverschlüsse,
• gepolsterten Rücken.

Dann könnte ein besserer Text lauten:

„Schwarzer Trekkingrucksack mit orangefarbenen Reißverschlüssen und zwei seitlichen Netztaschen.“

WAVE kann dir den vorhandenen Alt-Text zeigen.

Die inhaltliche Verbesserung ist deine Aufgabe.

Dekorative Bilder nicht automatisch mit Text versehen

Wenn WAVE auf Bilder hinweist, entsteht schnell der Reflex:

Jedes Bild braucht Text.

Das stimmt so nicht.

Rein dekorative Bilder sollten Screenreader-Nutzer nicht mit unnötigen Beschreibungen belasten.

Beispiel:

Eine geschwungene blaue Hintergrundlinie.

Es wäre wenig hilfreich, wenn ein Screenreader jedes Mal sagt:

„Dekorative geschwungene blaue Linie.“

Deshalb sollte immer der Zweck des Bildes berücksichtigt werden.

Formulare mit WAVE prüfen

Formulare sind ein weiterer Bereich, bei dem WAVE sehr nützlich ist.

Das betrifft:

• Kontaktformulare,
• Newsletter,
• Login,
• Registrierung,
• Terminbuchung,
• Checkout.

Besonders interessant sind Formularbeschriftungen.

Sichtbarer Text ist nicht automatisch ein Label

Auf dem Bildschirm steht:

E-Mail-Adresse

Daneben befindet sich ein Eingabefeld.

Das sieht korrekt aus.

Technisch können Text und Feld trotzdem überhaupt nicht miteinander verbunden sein.

Ein Screenreader erkennt dann möglicherweise nicht, welche Information erwartet wird.

WAVE kann bei der Suche nach solchen Problemen helfen.

Platzhalter nicht mit Beschriftung verwechseln

Ein Feld enthält:

Ihre E-Mail-Adresse

als Platzhalter.

Der Nutzer beginnt zu tippen.

Der Text verschwindet.

Dann ist die Beschriftung weg.

WAVE kann verschiedene technische Probleme erkennen, dennoch solltest du selbst überprüfen, ob Formularfelder dauerhaft verständlich beschriftet sind.

Links mit WAVE untersuchen

Links sind ebenfalls interessant.

Besonders problematisch:

leere Links.

Oder Links, die nur aus einem Icon bestehen.

Zum Beispiel:

Instagram-Symbol.

Ohne zugänglichen Namen.

Ein sehender Nutzer erkennt vielleicht sofort Instagram.

Ein Screenreader hört möglicherweise nur:

„Link.“

WAVE kann dabei helfen, solche Auffälligkeiten zu entdecken.

Was ist mit „Hier klicken“?

Ein automatisches Tool kann nicht immer beurteilen, ob ein Linktext im jeweiligen Zusammenhang wirklich gut formuliert ist.

Deshalb solltest du zusätzlich selbst prüfen.

Weniger hilfreich:

Hier klicken

Besser:

Preisliste herunterladen

Oder:

Mehr über unsere Gebäudereinigung erfahren

Das macht den Link auch außerhalb seines unmittelbaren Satzes verständlicher.

Farbkontrast mit WAVE prüfen

WAVE besitzt einen eigenen Bereich für Kontrastprobleme.

Dadurch kannst du schnell erkennen, welche Texte auffällig sind.

Das ist besonders praktisch bei Websites mit vielen individuellen Farben.

Zum Beispiel:

Corporate Design:

Hellblau.

Designer verwendet hellblaue Schrift auf weiß.

Sieht schick aus.

Kontrast:

zu schwach.

WAVE macht solche Probleme sichtbar.

Was bedeuten Kontrastwerte?

Für normalen Text wird bei WCAG Level AA grundsätzlich ein Kontrastverhältnis von mindestens:

4,5 : 1

verwendet.

Für großen Text gelten unter bestimmten Voraussetzungen:

3 : 1

Auch Bedienelemente und grafische Informationen können entsprechende Kontrastanforderungen haben.

Du musst die Werte nicht auswendig berechnen.

WAVE hilft dir bei der Analyse.

Struktur ohne CSS betrachten

Eine interessante Methode bei Accessibility-Tests ist es, die visuelle Gestaltung gedanklich einmal auszublenden.

Warum?

Weil CSS viele strukturelle Probleme verstecken kann.

Eine H4 kann wie die größte Überschrift der Seite aussehen.

Ein normaler Absatz kann optisch wie eine Überschrift gestaltet sein.

Ein Button kann eigentlich nur ein anklickbares div sein.

WAVE hilft dabei, stärker auf die technische Struktur zu schauen und nicht nur auf das Design.

Reading Order und Reihenfolge beachten

Bei komplexen Layouts können visuelle und technische Reihenfolge voneinander abweichen.

Zum Beispiel:

Links:

Produktbild.

Rechts:

Produktname und Preis.

Darunter:

Beschreibung.

Im Code könnte die Reihenfolge jedoch völlig anders aussehen.

Das kann für Tastatur- und Screenreader-Nutzer problematisch sein.

WAVE kann dir bei der strukturellen Analyse helfen.

Für die tatsächliche Tastaturreihenfolge solltest du anschließend unbedingt noch manuell testen.

WAVE und WordPress

Für WordPress-Websites ist WAVE besonders praktisch.

Denn viele Betreiber schreiben keinen eigenen HTML-Code.

Die Website entsteht aus:

• Theme,
• Pagebuilder,
• Plugins,
• eigenen Inhalten.

Dadurch weiß man oft gar nicht genau, was technisch im Browser ausgegeben wird.

WAVE analysiert das fertige Ergebnis.

Genau das ist entscheidend.

WAVE mit Elementor

Bei Elementor würde ich besonders prüfen:

• Überschriften,
• Buttons,
• Icon-Buttons,
• Akkordeons,
• Tabs,
• Formulare,
• Popups.

Ein Widget kann optisch gut aussehen und technisch trotzdem Auffälligkeiten besitzen.

WAVE mit Divi

Auch bei Divi lohnt sich die Prüfung der fertigen Seite.

Besonders:

• Navigation,
• Module mit Icons,
• Slider,
• Kontaktformulare,
• Akkordeons,
• Buttons,
• benutzerdefinierte Module.

Wer viel eigenes CSS einsetzt, sollte zusätzlich Fokus und Kontraste manuell prüfen.

WAVE und WooCommerce

Bei WooCommerce reicht die Startseite nicht.

Teste verschiedene Seitentypen.

Produktseite

Prüfe:

• Bilder,
• Alt-Texte,
• Produktüberschrift,
• Buttons,
• Varianten,
• Preis,
• Struktur.

Kategorie

Prüfe:

• Filter,
• Produktlinks,
• Sortierung,
• Überschriften.

Warenkorb

Prüfe:

• Mengensteuerung,
• Entfernen-Buttons,
• Gutschein,
• Checkout-Link.

Kasse

Prüfe:

• Formularbeschriftungen,
• Fehlermeldungen,
• Zahlungsarten,
• Checkboxen.

Kundenkonto

Prüfe:

• Login,
• Navigation,
• Downloads,
• Adressänderung.

Damit bekommst du ein wesentlich realistischeres Bild vom Shop.

Dynamische Seiten mit der Browser-Erweiterung testen

Ein großer Vorteil der Erweiterung besteht darin, dass die aktuell im Browser gerenderte Seite geprüft wird.

Das ist besonders relevant bei modernen Websites.

Viele Inhalte entstehen erst durch JavaScript.

Zum Beispiel:

• Filter,
• Varianten,
• Popups,
• Warenkorb,
• Checkout,
• Cookie-Banner.

Deshalb solltest du nicht nur den ursprünglichen Zustand testen.

Beispiel

Produktseite öffnen.

WAVE starten.

Dann:

Variante auswählen.

Es erscheinen neue Felder.

WAVE erneut ausführen.

So kannst du auch unterschiedliche Zustände untersuchen.

Cookie-Banner mit WAVE prüfen

Öffne die Website am besten in einem privaten Browserfenster.

Dann erscheint das Cookie-Banner erneut.

Starte WAVE in diesem Zustand.

Prüfe:

• Buttons,
• Überschrift,
• Schalter,
• Links,
• Struktur.

Aber auch hier gilt:

WAVE alleine reicht nicht.

Danach unbedingt die Tastatur verwenden.

Kannst du:

• alle ablehnen,
• akzeptieren,
• Einstellungen öffnen,
• Schalter bedienen,
• speichern?

Das ist mindestens genauso wichtig wie der automatische Test.

Warum WAVE manchmal sehr viele Symbole zeigt

Beim ersten Test kann das erschreckend wirken.

Vielleicht siehst du:

5 Errors.

12 Alerts.

34 Features.

20 Structural Elements.

Das bedeutet nicht:

71 Barrierefreiheitsfehler.

Features und Structural Elements sind keine Fehlermeldungen.

Auch Alerts müssen erst bewertet werden.

Konzentriere dich deshalb zunächst auf:

Errors

und:

Contrast Errors

Danach gehst du die Alerts durch.

Ist jeder WAVE Alert ein Problem?

Nein.

Das ist eine der wichtigsten Regeln bei WAVE.

Ein Alert bedeutet:

Bitte manuell überprüfen.

Nicht:

Muss zwingend repariert werden.

Nehmen wir ein Bild mit leerem Alternativtext.

Wenn es rein dekorativ ist, kann genau das die richtige Umsetzung sein.

Ein automatisches Tool kann den Zweck des Bildes nicht immer zuverlässig bestimmen.

Du musst entscheiden.

Sollte man versuchen, alle WAVE-Symbole zu entfernen?

Nein.

Das wäre sogar die falsche Herangehensweise.

Wenn WAVE eine Überschrift als Structural Element markiert, ist das kein Problem.

Wenn ein korrekt ausgezeichneter Bereich angezeigt wird, musst du ihn nicht entfernen.

Das Ziel lautet nicht:

Keine WAVE-Symbole.

Das Ziel lautet:

Keine relevanten Barrieren.

Gibt WAVE einen Accessibility-Score?

Je nach eingesetztem WAVE-Angebot können Bewertungs- oder Impact-Funktionen vorhanden sein.

Für die normale Arbeit mit WAVE würde ich mich jedoch nicht auf eine einzelne Zahl konzentrieren.

Viel wichtiger sind die konkreten Hinweise.

Ein Score kann niemals vollständig beantworten:

• Ist die Navigation logisch?
• Ist der Alt-Text sinnvoll?
• Funktioniert der Checkout?
• Ist die Sprache verständlich?
• kann ein Screenreader-Nutzer das Angebot wirklich nutzen?

Genau wie bei Lighthouse gilt:

Die konkrete Barriere ist wichtiger als die Zahl.

Bedeutet „0 Errors“, dass die Seite barrierefrei ist?

Nein.

Eine Seite kann bei WAVE keine automatisch festgestellten Errors zeigen und trotzdem erhebliche Probleme besitzen.

Beispiele:

Problem 1

Alle Bilder besitzen Alt-Texte.

Aber die Texte lauten:

„Bild 1“

„Bild 2“

„Bild 3“

Problem 2

Alle Buttons besitzen technische Namen.

Aber:

„Weiter“

„Weiter“

„Weiter“

Niemand weiß, was die Buttons eigentlich tun.

Problem 3

Das Menü ist technisch korrekt aufgebaut.

Mit Tastatur bleibt man trotzdem in einem Dropdown hängen.

Problem 4

Das Kontaktformular besitzt Labels.

Die Fehlermeldung lautet:

„Error.“

All diese Probleme brauchen menschliche Prüfung.

Kann WAVE BFSG-Konformität bestätigen?

Nein.

WAVE ist ein Prüfwerkzeug.

Kein BFSG-Zertifikat.

Die Aussage:

„WAVE zeigt keine Fehler, deshalb ist meine Website BFSG-konform.“

ist zu weitgehend.

WAVE kann ein wichtiger Bestandteil einer Prüfung sein.

Für eine umfassende Bewertung gehören zusätzlich unter anderem dazu:

• Tastaturtest,
• Screenreader-Test,
• Vergrößerung,
• mobile Nutzung,
• manuelle Inhaltsprüfung,
• Überprüfung vollständiger Nutzerprozesse.

Kann WAVE WCAG-Konformität bestätigen?

Auch hier:

Nicht alleine.

WAVE kann zahlreiche WCAG-bezogene Probleme erkennen oder bei deren Prüfung helfen.

Viele WCAG-Kriterien benötigen jedoch menschliche Bewertung.

Deshalb sollte ein WAVE-Test als Teil einer umfassenderen Prüfung verstanden werden.

Warum WAVE trotzdem sehr wertvoll ist

Nach all diesen Einschränkungen könnte man denken:

Warum soll ich das Tool überhaupt verwenden?

Ganz einfach:

Weil es sehr schnell sehr viele reale Probleme sichtbar macht.

Innerhalb weniger Minuten kannst du beispielsweise entdecken:

• fünf Bilder ohne Alt-Texte,
• zwei Formularfelder ohne Label,
• sechs Kontrastprobleme,
• eine falsche Überschriftenstruktur,
• einen leeren Button.

Ohne Tool würdest du dafür möglicherweise deutlich länger brauchen.

WAVE spart also Zeit.

Es ersetzt nur nicht den Menschen.

Meine empfohlene Reihenfolge bei einem WAVE-Test

Wenn ich eine Website schnell prüfen möchte, gehe ich so vor:

Schritt 1: Errors

Zuerst alle eindeutigen Fehler ansehen.

Schritt 2: Contrast Errors

Kontrastprobleme prüfen.

Schritt 3: Alerts

Jeden Alert manuell bewerten.

Schritt 4: Struktur

Überschriften und Seitenaufbau ansehen.

Schritt 5: Formulare

Labels und Formularaufbau überprüfen.

Schritt 6: Alt-Texte

Nicht nur Existenz, sondern Inhalt kontrollieren.

Schritt 7: ARIA

Bei Auffälligkeiten technische Umsetzung untersuchen.

Danach beginnt der manuelle Test.

Nach WAVE: Tastaturtest

Jetzt Maus weglegen.

Verwende nur:

• Tab,
• Shift + Tab,
• Enter,
• Leertaste,
• Pfeiltasten,
• Escape.

Versuche die Website tatsächlich zu bedienen.

Bei einer normalen Firmenwebsite:

Navigation → Leistung → Kontakt → Formular.

Bei einem Shop:

Kategorie → Produkt → Variante → Warenkorb → Checkout.

WAVE kann diese praktische Nutzung nicht vollständig ersetzen.

Nach WAVE: Zoom-Test

Stelle den Browser auf etwa 200 Prozent.

Prüfe:

• Überlappt Text?
• Werden Buttons abgeschnitten?
• Ist das Menü noch nutzbar?
• Funktionieren Formulare?
• Bleibt das Cookie-Banner bedienbar?
• Muss unnötig horizontal gescrollt werden?

Auch diese Probleme erkennt WAVE nicht vollständig.

Nach WAVE: Screenreader

Wenn du unter Windows arbeitest, kannst du beispielsweise einen kostenlosen Screenreader für einen Grundtest verwenden.

Höre dir zumindest an:

• Seitentitel,
• Überschriften,
• Navigation,
• Buttons,
• Bilder,
• Formularfelder.

Du wirst schnell merken, warum technische Struktur wichtig ist.

WAVE und Screenreader ergänzen sich

WAVE zeigt:

Bild besitzt Alt-Text.

Screenreader zeigt dir:

Wie klingt dieser Alt-Text eigentlich für einen Nutzer?

WAVE zeigt:

Button besitzt zugänglichen Namen.

Screenreader sagt:

„Weiter Button.“

Dann kannst du entscheiden, ob „Weiter“ tatsächlich verständlich genug ist.

Das ist ein gutes Beispiel dafür, warum mehrere Testmethoden so hilfreich sind.

WAVE auf dem Smartphone?

Die eigentliche Prüfung erfolgt besonders komfortabel am Desktop-Browser.

Das bedeutet aber nicht, dass du die mobile Website ignorieren solltest.

Viele responsive Websites verändern auf kleineren Bildschirmen:

• Menü,
• Filter,
• Tabellen,
• Akkordeons,
• Checkout,
• Sticky Buttons.

Diese Funktionen müssen zusätzlich praktisch auf einem Smartphone getestet werden.

Unterschiedliche Bildschirmgrößen berücksichtigen

Selbst wenn dieselbe HTML-Seite geladen wird, können bestimmte Elemente bei verschiedenen Breakpoints:

• ausgeblendet,
• eingeblendet,
• umgeordnet

werden.

Ein klassisches Beispiel ist die Navigation.

Desktop:

normales Menü.

Mobil:

Hamburger-Menü.

Das mobile Menü kann völlig andere Accessibility-Probleme besitzen.

WAVE nach Änderungen erneut starten

Du hast einen Fehler behoben?

Nicht einfach davon ausgehen, dass jetzt alles stimmt.

Website neu laden.

WAVE erneut ausführen.

Prüfen:

Ist der Error verschwunden?

Ist vielleicht ein neues Problem entstanden?

Gerade bei Pagebuildern können kleine Änderungen unerwartete Auswirkungen haben.

Fehler dokumentieren

Bei größeren Websites lohnt es sich, die gefundenen Probleme zu notieren.

Eine einfache Tabelle reicht.

Zum Beispiel:

Seite	Problem	Priorität	Status
Startseite	Kontrast Button	Mittel	Offen
Kontakt	E-Mail-Feld ohne Label	Hoch	Offen
Produkt	Bild ohne Alt-Text	Mittel	Erledigt
Checkout	Zahlungsbutton unklar	Hoch	Offen

So wird aus einem einmaligen Test ein echter Verbesserungsprozess.

Probleme nach Auswirkung priorisieren

Nicht jedes WAVE-Problem ist gleich dringend.

Hohe Priorität

Alles, was Nutzung verhindert.

Zum Beispiel:

• Formular nicht bedienbar,
• wichtige Funktion ohne zugänglichen Namen,
• Navigation blockiert,
• Checkout nicht nutzbar.

Mittlere Priorität

Probleme, die Informationen deutlich erschweren.

Zum Beispiel:

• wichtige Bilder ohne Alt-Texte,
• schlechte Kontraste,
• unklare Struktur.

Danach

Weitere Optimierungen und Alerts.

Dabei sollte immer die tatsächliche Auswirkung auf Nutzer berücksichtigt werden.

WAVE und Lighthouse kombinieren

WAVE und Google Lighthouse sind keine Konkurrenten.

Ich würde beide verwenden.

Lighthouse

Gut für:

• schnellen Score,
• automatisierte technische Basisprüfung,
• Entwicklertools.

WAVE

Gut für:

• visuelle Zuordnung,
• Struktur,
• direkte Darstellung von Accessibility-Informationen,
• manuelle Bewertung von Hinweisen.

Ein sinnvoller Ablauf:

Lighthouse.

WAVE.

Tastatur.

Zoom.

Screenreader.

Damit erhältst du ein wesentlich besseres Bild als mit einem einzelnen Scanner.

Ein einfacher 20-Minuten-WAVE-Test

Wenn du wenig Zeit hast, kannst du so vorgehen.

Minute 1 bis 3

WAVE auf der Startseite starten.

Minute 3 bis 6

Errors prüfen.

Minute 6 bis 9

Contrast Errors prüfen.

Minute 9 bis 12

Alerts ansehen.

Minute 12 bis 15

Überschriften und Struktur kontrollieren.

Minute 15 bis 20

Maus weglegen und Seite mit Tastatur bedienen.

Damit findest du häufig schon einige der wichtigsten Probleme.

Welche Seiten zuerst mit WAVE prüfen?

Bei einer normalen Unternehmenswebsite:

1. Startseite
2. wichtigste Leistungsseite
3. Kontaktseite
4. Kontaktformular
5. Blogartikel

Bei einem Shop:

1. Startseite
2. Kategorie
3. Produktseite
4. Warenkorb
5. Checkout
6. Kundenkonto

Bei einer Buchungsseite:

1. Leistungsseite
2. Kalender
3. Buchungsformular
4. Bestätigung

Du musst nicht sofort 500 nahezu identische Unterseiten einzeln kontrollieren.

Beginne mit unterschiedlichen Seitentypen.

Typische WAVE-Fehler bei WordPress

Aus meiner Sicht lohnt sich bei WordPress ein genauer Blick auf:

• Bilder ohne Alt-Texte,
• leere Icon-Links,
• Überschriften,
• Formularlabels,
• Kontrastprobleme,
• Pagebuilder-Elemente,
• Navigation,
• eingebettete Drittanbieter.

Gerade Plugins können technischen Code erzeugen, den man im WordPress-Backend überhaupt nicht bemerkt.

Typische Probleme bei WooCommerce

Bei Shops zusätzlich:

• Produktgalerien,
• Varianten,
• Filter,
• Warenkorb-Icons,
• Mengensteuerung,
• Checkout-Felder,
• Zahlungsanbieter,
• Kundenkonto.

WAVE kann einiges davon prüfen.

Die tatsächliche Bedienbarkeit musst du anschließend aber praktisch testen.

Was WAVE nicht automatisch repariert

Ein Punkt, der manchmal missverstanden wird:

WAVE ist kein Accessibility-Overlay.

Es verändert deine Website nicht dauerhaft.

Das Tool zeigt Probleme.

Du musst sie selbst beheben.

Das kann je nach Ursache passieren in:

• WordPress,
• Theme-Einstellungen,
• Pagebuilder,
• Plugin,
• HTML,
• CSS,
• JavaScript.

Das ist meiner Meinung nach sogar ein Vorteil.

Du reparierst die eigentliche Ursache und setzt nicht nur eine zusätzliche Oberfläche darüber.

Häufiger Fehler: Nur auf rote Symbole achten

Die roten Errors sind wichtig.

Aber danach sollte die Prüfung nicht beendet werden.

Auch:

• Alerts,
• Struktur,
• Alt-Texte,
• ARIA

können wichtige Hinweise liefern.

Und nach WAVE kommen immer noch die manuellen Tests.

Häufiger Fehler: Jeden Alert zwanghaft beseitigen

Das andere Extrem ist ebenfalls falsch.

Ein Alert verlangt eine Bewertung.

Wenn du einfach versuchst, jeden Hinweis technisch verschwinden zu lassen, kannst du sogar neue Probleme verursachen.

Erst verstehen.

Dann entscheiden.

Häufiger Fehler: Nur die Startseite testen

Die Startseite ist selten die technisch komplizierteste Seite.

Formulare, Produktvarianten, Checkout und Zahlungsanbieter sind häufig deutlich anspruchsvoller.

Deshalb immer mehrere repräsentative Seiten auswählen.

Häufiger Fehler: „0 Errors = barrierefrei“

Das ist wahrscheinlich das größte Missverständnis.

0 WAVE Errors ist ein gutes Ergebnis.

Aber nur für die automatisch erkennbaren Fehler.

Es ist kein Zertifikat.

Kurze WAVE-Checkliste

Wenn du WAVE verwendest, gehe diese Punkte durch:

• Gibt es Errors?
• Gibt es Contrast Errors?
• Welche Alerts müssen manuell überprüft werden?
• Sind alle wichtigen Bilder sinnvoll beschrieben?
• Sind Überschriften logisch aufgebaut?
• Haben Formularfelder verständliche Labels?
• Haben Links und Buttons zugängliche Namen?
• Sind strukturelle Elemente sinnvoll eingesetzt?
• Gibt es auffällige ARIA-Hinweise?
• Funktioniert die Seite anschließend mit Tastatur?
• Bleibt der Fokus sichtbar?
• Funktioniert die Seite bei Vergrößerung?
• Ist die mobile Version bedienbar?
• Ist die Screenreader-Ausgabe verständlich?

Mein Fazit zum WAVE Tool

WAVE gehört für mich zu den sinnvollsten kostenlosen Werkzeugen für einen ersten Accessibility-Check.

Nicht weil das Tool jede Barriere erkennt.

Sondern weil es technische Accessibility sehr anschaulich macht.

Du siehst direkt:

Hier fehlt etwas.

Hier stimmt der Kontrast nicht.

Hier sollte ich genauer hinschauen.

Gerade für WordPress-Nutzer ist das enorm hilfreich.

Du musst nicht erst verstehen, welches Plugin welchen HTML-Code erzeugt.

WAVE zeigt dir das Ergebnis im Browser.

Der richtige Umgang mit dem Tool lautet deshalb nicht:

WAVE starten, rote Fehler beseitigen, fertig.

Sondern:

WAVE starten, Ergebnisse verstehen, technische Probleme beheben und danach manuell testen.

Meine Empfehlung für einen kostenlosen Basischeck wäre:

WAVE + Lighthouse + Tastaturtest + Zoom + Screenreader.

Damit kannst du bereits eine erstaunlich große Zahl typischer Barrieren entdecken.

Und das Wichtigste:

Du bekommst nach und nach ein Gefühl dafür, worauf du auch ohne Tool achten solltest.

Irgendwann siehst du einen winzigen hellgrauen Button und denkst automatisch:

Den Kontrast sollte ich prüfen.

Du siehst einen Icon-Button und fragst:

Was hört hier eigentlich ein Screenreader?

Genau dann hat WAVE seinen größten Zweck erfüllt.

Nicht nur Fehler anzeigen.

Sondern dir dabei helfen, Barrieren überhaupt zu erkennen.

Hinweis: WAVE bietet eine sehr gute technische Orientierung, ersetzt jedoch keine vollständige fachliche Accessibility-Prüfung und keine individuelle rechtliche Bewertung hinsichtlich BFSG, WCAG oder anderer Anforderungen.