Ratgeber

WAVE Barrierefreiheit: den eigenen Shop Schritt für Schritt prüfen

Veröffentlicht am 27. Oktober 2026

Mit WAVE prüfen Sie die Barrierefreiheit Ihres Shops, indem Sie Startseite, Produktseite und Warenkorb einzeln in der WAVE-Browsererweiterung öffnen und jede Meldung der Reihe nach abarbeiten: zuerst Errors und Contrast Errors, dann Alerts, zuletzt Features, Structural Elements und ARIA als Kontrolle. Ein Bericht ohne Errors heißt dabei nur, dass WAVE nichts gefunden hat; WebAIM schreibt selbst: „WAVE cannot tell you if your web content is accessible.“

WAVE ist ein Prüfwerkzeug von WebAIM. Dieser Artikel führt Sie mit WAVE durch die drei wichtigsten Seiten eines Onlineshops, erklärt jede Meldungsart und gibt Ihnen zu jeder häufigen Meldung eine Checkliste: was sie bedeutet, wie Sie prüfen, ob sie echt ist, wie Sie sie im Shop beheben und welches Kriterium der WCAG 2.2 dahintersteht. Wie der automatische Test mit Tastatur, Zoom und Screenreader zu einer ganzen Prüfung zusammenpasst, steht in der Übersicht Website auf Barrierefreiheit prüfen: Checkliste für Onlineshops.

Alle Angaben über WAVE stammen aus der WAVE-Hilfe, der Seite zu den Browsererweiterungen, den Hinweisen zur Bedienung und der WAVE-Dokumentation aller Meldungen, alle gelesen am 27.10.2026. Die Oberfläche von WAVE ist englisch; Menü- und Meldungsnamen stehen deshalb hier im englischen Original.

Online-Version oder Erweiterung: was Sie für einen Shop brauchen

WAVE gibt es in zwei Formen, die für einen Shop einen großen Unterschied machen:

Quellen: WAVE-Hilfe und WAVE Browser Extensions, gelesen am 27.10.2026. Dass die Online-Version Ihren Warenkorb nicht sieht, ist unsere Lesart der Hilfe: Dort steht, dass Seiten je nach Browser, Standort sowie Sitzungs- und Cookie-Daten unterschiedliche Inhalte ausliefern und die Ergebnisse der Versionen deshalb voneinander abweichen können. Ein Warenkorb hängt an genau diesen Sitzungsdaten.

Unsere Empfehlung: Installieren Sie die Erweiterung über die Links auf der Erweiterungsseite von WebAIM und prüfen Sie alle drei Seiten damit. Laut WebAIM kommen Updates der Erweiterung automatisch. Ein erneuter Klick auf das Symbol oder das Neuladen der Seite entfernt die WAVE-Ansicht wieder.

Die Bedienoberfläche in einer Minute

Nach dem Start fügt WAVE Symbole direkt in Ihre Seite ein und zeigt eine Seitenleiste. Laut den Hinweisen zur Bedienung besteht die Oberfläche aus drei Bereichen: der WAVE-Seitenleiste, Ihrer Seite mit den eingefügten Symbolen und dem Code-Bereich. Die Seitenleiste hat die Reiter Details, Reference, Structure und Contrast.

• Details: listet alle Funde nach Kategorie. Mit den Kontrollkästchen blenden Sie Kategorien oder einzelne Arten von Symbolen aus. Das Reference-Symbol hinter jeder Art springt zur passenden Erklärung.
• Reference: zeigt die Kurzdokumentation zu einer Meldung. Dieselben Texte stehen ausführlich in der WAVE-Dokumentation, jeweils mit den zugehörigen WCAG-2.2-Kriterien.
• Code: Über den Reiter Code am unteren Rand sehen Sie den HTML-Code zu einem Symbol. Diesen Ausschnitt geben Sie später an Ihre Agentur oder den Theme-Anbieter weiter.
• Styles: Schalten Sie in der Seitenleiste die Option Styles aus, zeigt WAVE die Seite ohne Gestaltung. Laut WAVE-Hilfe sehen Sie dann die Reihenfolge, in der Tastatur- und Screenreader-Nutzer die Seite erreichen, und auch Symbole in versteckten Bereichen.

Wenn die Seite mit den eingefügten Symbolen zerfällt, ist das laut WebAIM normal; auch dann hilft es, Styles auszuschalten.

Die sechs Meldungsarten

Die WAVE-Dokumentation teilt jede Meldung in eine von sechs Kategorien. Die Spalte „Was Sie tun“ ist unsere Empfehlung für die Abarbeitung im Shop.

WebAIM schreibt in der Hilfe ausdrücklich, dass das Ziel nicht sein soll, alle Symbole loszuwerden, außer den Errors: Sie können ein Problem für Nutzer darstellen, müssen aber ebenfalls von Hand beurteilt werden. Die übrigen Symbole sollen laut WebAIM die Prüfung von Hand erleichtern. Grüne Features und Structural Elements sind also kein Arbeitsauftrag, sondern Prüfhilfe; Alerts beurteilen Sie dagegen einzeln, weil einige davon echte Barrieren sind.

Schritt für Schritt: Startseite, Produktseite, Warenkorb

Die Reihenfolge und die Stationen sind unser Vorschlag für einen typischen kleinen Shop.

Schritt 1: Startseite prüfen

1. Öffnen Sie die Startseite in Chrome, Firefox oder Edge. Lassen Sie das Cookie-Banner zunächst offen und starten Sie WAVE. So prüfen Sie den Zustand, den jeder neue Besucher sieht.
2. Notieren Sie, welche Errors und Contrast Errors WAVE in der Seitenleiste meldet, im Protokoll am Ende dieses Artikels.
3. Blenden Sie mit den Kontrollkästchen alles außer Errors aus. Klicken Sie jedes Fehlersymbol an, öffnen Sie Code, und gehen Sie die passende Checkliste unten durch.
4. Dann Contrast Errors, dann Alerts.
5. Öffnen Sie Structure und prüfen Sie, ob die Überschriften die Seite sinnvoll gliedern.
6. Schalten Sie Styles aus und lesen Sie die Seite von oben nach unten. Steht das Menü vor dem Inhalt, und folgt der Inhalt einer verständlichen Reihenfolge?
7. Akzeptieren oder schließen Sie das Cookie-Banner, laden Sie die Seite neu und starten Sie WAVE erneut. Jetzt sehen Sie die Startseite ohne Banner.

Typische Funde auf der Startseite: verlinktes Logo ohne Alternativtext, Warenkorb- und Lupen-Symbol als leerer Link oder leere Schaltfläche, Suchfeld ohne Beschriftung, Werbebanner mit Text auf Bild, Newsletter-Feld im Fuß ohne Label, grauer Text im Fußbereich mit zu wenig Kontrast.

Schritt 2: Produktseite prüfen

1. Öffnen Sie eine Produktseite mit Varianten, also mit Größe oder Farbe. Starten Sie WAVE und arbeiten Sie die Punkte 2 bis 6 aus Schritt 1 ab.
2. Schließen Sie WAVE, wählen Sie eine Variante, öffnen Sie die Bildergalerie oder die Größentabelle und starten Sie WAVE erneut. Weil die Erweiterung die Seite so prüft, wie der Browser sie gerade zeigt, erfasst sie so nach unserer Lesart auch Inhalte, die erst nach einem Klick entstehen.
3. Legen Sie das Produkt in den Warenkorb. Öffnet sich ein Mini-Warenkorb oder ein Fenster „Artikel hinzugefügt“, starten Sie WAVE noch einmal, solange es offen ist.

Typische Funde auf der Produktseite: Produktbilder ohne Alternativtext oder mit dem Dateinamen als Alternativtext, Farbfelder als Schaltflächen ohne Namen, Plus und Minus am Mengenfeld als leere Schaltflächen, Variantenauswahl ohne Beschriftung, Streichpreis und Grundpreis in hellem Grau, eingebettetes YouTube-Video, verlinktes PDF-Datenblatt, Produktbild und Produktname als zwei Links zum selben Ziel in empfohlenen Produkten.

Schritt 3: Warenkorb und Checkout prüfen

1. Legen Sie in Ihrem Browser mindestens ein Produkt in den Warenkorb und öffnen Sie die Warenkorbseite. Starten Sie WAVE über die Erweiterung, nicht über wave.webaim.org.
2. Arbeiten Sie die Punkte 2 bis 6 aus Schritt 1 ab. Achten Sie besonders auf Mengenfeld, Entfernen-Schaltfläche, Gutscheinfeld und Versandrechner.
3. Gehen Sie in den Checkout und prüfen Sie jede Stufe einzeln: Adresse, Versandart, Zahlungsart, Übersicht. Schicken Sie keine Bestellung ab.
4. Lassen Sie im Adressformular ein Pflichtfeld leer, senden Sie das Formular ab und starten Sie WAVE erneut. So prüft WAVE auch die Fehlermeldungen.
5. Wenn Sie ein Kundenkonto anbieten: Anmeldung und Registrierung ebenso prüfen.

Typische Funde im Warenkorb und Checkout: Mengenfeld und Gutscheinfeld ohne Label, Kontrollkästchen für AGB oder „Lieferadresse wie Rechnungsadresse“ ohne Beschriftung, Gruppen von Optionsfeldern für Versand- und Zahlungsart ohne fieldset (Alert „Missing fieldset“), Fehlermeldungen in rotem Text mit zu wenig Kontrast.

Zahlungsfelder fremder Anbieter. Liegt ein Kartenfeld oder Bezahlfenster in einem eingebetteten Rahmen eines Zahlungsanbieters, beheben Fehler darin nicht Sie, sondern der Anbieter. Notieren Sie den Fund trotzdem und geben Sie ihn an den Anbieter weiter.

Ist die Meldung echt? Fünf Prüffragen

Bevor Sie etwas ändern lassen, stellen Sie zu jedem Error diese Fragen. Frage 1 stützt sich auf die WAVE-Hilfe, Frage 3 auf die WAVE-Dokumentation, Frage 4 auf die WCAG 2.2; Fragen 2 und 5 sind unsere Empfehlung:

1. Ist das Element versteckt? WAVE prüft absichtlich auch Inhalte, die mit CSS, dem hidden-Attribut oder aria-hidden versteckt sind, etwa Dropdown-Menüs, Reiter, Dialoge und Karussells. In der Seitenleiste erscheinen solche Symbole leicht abgeblendet. Wird das Element nie angezeigt, darf der Error laut WebAIM ignoriert werden. Ein Mini-Warenkorb oder ein Untermenü wird aber angezeigt, sobald jemand es öffnet; dann ist der Fund echt.
2. Ist der Inhalt im Rahmen eines Drittanbieters? Bewertungs-Widgets, Chat, Karten oder Zahlungsfelder: Der Fund ist echt, aber der Anbieter muss ihn beheben.
3. Stimmt die Regel für diesen Fall? Jede Meldung in der Dokumentation hat einen Abschnitt „The Algorithm... in English“. Er sagt genau, was WAVE prüft. „Possible heading“ etwa meldet jeden kurzen Absatz in großer oder fetter Schrift; ist das ein Preis und keine Überschrift, ist der Alert erledigt.
4. Ist der Kontrastfund eine Ausnahme? Kriterium 1.4.3 nimmt Text in inaktiven Bedienelementen, reine Dekoration und Logos aus (WCAG 2.2, 1.4.3). Eine ausgegraute Schaltfläche „In den Warenkorb“, solange keine Größe gewählt ist, ist deshalb kein Verstoß gegen 1.4.3.
5. Zeigen viele Funde auf dieselbe Ursache? 40 Contrast Errors mit derselben Farbe sind eine Änderung im Theme, nicht 40.

Checkliste je häufiger Meldung: Errors

Die Kriterien stammen aus dem Abschnitt „Relevant WCAG 2.2 Success Criteria“ der WAVE-Dokumentation und sind gegen die WCAG 2.2 in der Fassung vom 12. Dezember 2024 geprüft, beides gelesen am 27.10.2026. Wo WAVE mehrere Kriterien nennt, stehen hier die wichtigsten; die vollständige Liste finden Sie bei jeder Meldung in der Dokumentation. Die Zeile „Wer behebt es“ ist unsere Einschätzung für typische Shops.

Missing alternative text

• Bedeutet: Ein Bild hat gar kein alt-Attribut.
• Echt? Fast immer. Prüfen Sie nur, ob das Bild überhaupt angezeigt wird (siehe Prüffrage 1).
• Beheben: Produktbilder bekommen im Shop-Backend einen Alternativtext, der zeigt, was zu sehen ist. Rein schmückende Bilder bekommen laut WebAIM ein leeres alt="", damit Screenreader sie überspringen. Ein Formulierungsmuster finden Sie in Produktbilder mit Alternativtexten: Vorlage für Shops.
• Kriterium: 1.1.1 Nicht-Text-Inhalt (A)
• Wer behebt es: Sie selbst bei Produkt- und Bannerbildern; der Theme-Anbieter, wenn das Theme Bilder ohne alt ausgibt.

Linked image missing alternative text

• Bedeutet: Ein Link enthält nur ein Bild ohne Alternativtext, der Link hat also keinen Namen. Typisch: das Logo oben links, Kacheln in Kategorie-Übersichten, Social-Media-Symbole.
• Echt? Ja, wenn der Link keinen anderen Text enthält.
• Beheben: Der Alternativtext beschreibt das Ziel oder die Funktion, beim Logo zum Beispiel den Shopnamen.
• Kriterium: 1.1.1 (A) und 2.4.4 Linkzweck im Kontext (A)
• Wer behebt es: Logo und Kacheln meist Sie in den Theme-Einstellungen, Symbol-Links der Theme-Anbieter.

Empty link

• Bedeutet: Ein Link enthält keinen Text und kein Bild mit Alternativtext.
• Echt? Ja, sofern der Link angezeigt wird. Häufig sind Warenkorb-, Konto- und Wunschlisten-Symbole aus einer Symbolschrift oder einem SVG ohne Namen.
• Beheben: Laut WebAIM den leeren Link entfernen oder Text hineinsetzen, der Ziel oder Funktion beschreibt. Bei Symbolen ist das ein für Screenreader lesbarer Text wie „Warenkorb“.
• Kriterium: 2.4.4 Linkzweck im Kontext (A)
• Wer behebt es: Theme-Anbieter oder Agentur.

Empty button

• Bedeutet: Eine Schaltfläche hat keinen Text oder Alternativtext. Typisch: Plus und Minus am Mengenfeld, Farbfelder, Schließen-Kreuz, Pfeile in der Bildergalerie, Lupe im Suchfeld.
• Echt? Ja, sobald die Schaltfläche angezeigt wird.
• Beheben: Text in die Schaltfläche setzen, bei Farbfeldern den Farbnamen, beim Kreuz „Schließen“.
• Kriterium: laut WAVE 1.1.1 (A) und 2.4.4 (A); nach unserer Lesart betrifft ein namenloses Bedienelement auch 4.1.2 Name, Rolle, Wert (A).
• Wer behebt es: Theme-Anbieter; bei Farbfeldern oft die App oder das Plugin für Varianten.

Missing form label

• Bedeutet: Ein Eingabefeld, eine Auswahlliste oder ein Textfeld hat keine zugeordnete Beschriftung.
• Echt? WAVE meldet es nicht, wenn das Feld ein title-Attribut oder aria-labelledby hat. Ein Platzhaltertext im Feld zählt für WAVE nicht als Beschriftung. Für Schaltflächen und versteckte Felder verlangt WAVE kein Label.
• Beheben: Laut WebAIM die sichtbare Beschriftung mit dem label-Element dem Feld zuordnen; ohne sichtbare Beschriftung eine zugeordnete Beschriftung, ein beschreibendes title-Attribut oder aria-labelledby ergänzen.
• Kriterium: 1.3.1 Info und Beziehungen (A), 3.3.2 Beschriftungen oder Anweisungen (A), dazu laut WAVE 1.1.1 und 2.4.6
• Wer behebt es: Theme-Anbieter für Suche, Mengenfeld und Checkout; der Anbieter des Newsletter-Tools für dessen Formular.

Language missing or invalid

• Bedeutet: Im html-Element fehlt das lang-Attribut oder der Wert ist ungültig.
• Echt? Ja. Prüfen Sie im Code-Reiter, ob dort zum Beispiel lang="de" steht.
• Beheben: Sprache des Shops korrekt einstellen; das Theme muss sie als lang-Attribut ausgeben.
• Kriterium: 3.1.1 Sprache der Seite (A)
• Wer behebt es: meist eine Einstellung im Shopsystem, sonst der Theme-Anbieter.

Missing or uninformative page title

• Bedeutet: Der Seitentitel fehlt, ist leer oder beginnt mit „untitled“.
• Echt? Ja. WAVE prüft dabei nur diese Fälle; ob ein vorhandener Titel die Seite beschreibt, prüfen Sie selbst, etwa „Leinenkissen Salbei | Shopname“ statt nur „Shopname“ auf jeder Seite.
• Beheben: Titel im SEO-Feld der Seite oder des Produkts eintragen.
• Kriterium: 2.4.2 Seite mit Titel (A)
• Wer behebt es: Sie selbst.

Empty heading

• Bedeutet: Eine Überschrift enthält keinen Text. Häufig sind leere Überschriften-Blöcke im Seitenbaukasten oder Überschriften, die nur ein Symbol enthalten.
• Echt? Ja, außer das Element wird nie angezeigt.
• Beheben: Leeren Block löschen oder Text eintragen.
• Kriterium: 1.3.1 (A), 2.4.6 Überschriften und Beschriftungen (AA)
• Wer behebt es: Sie im Seiteneditor, sonst der Theme-Anbieter.

Broken skip link

• Bedeutet: Ein Link „Zum Inhalt springen“ ist da, aber sein Ziel fehlt oder er ist mit display:none oder visibility:hidden versteckt.
• Echt? Ja. Gegenprobe: Seite laden, einmal Tab drücken, Enter. Springt der Fokus nicht in den Inhalt, ist der Link kaputt. Wie Sie das prüfen, zeigt der Tastaturtest in 10 Minuten.
• Beheben: Ziel-ID im Inhalt ergänzen; den Link beim Fokussieren sichtbar machen statt ganz zu verstecken.
• Kriterium: 2.4.1 Blöcke umgehen (A), 2.1.1 Tastatur (A)
• Wer behebt es: Theme-Anbieter.

Broken ARIA reference

• Bedeutet: Ein aria-labelledby oder aria-describedby verweist auf eine ID, die es auf der Seite nicht gibt. Die Beschriftung kommt dann beim Screenreader nicht an.
• Echt? Ja. Manchmal entsteht das Ziel erst nach einem Klick; dann WAVE nach dem Klick erneut starten.
• Beheben: Verweis oder ID im Code korrigieren.
• Kriterium: 1.3.1 (A), 4.1.2 Name, Rolle, Wert (A)
• Wer behebt es: Theme-, App- oder Plugin-Anbieter, je nachdem, wessen Code das ist.

Checkliste: Contrast Errors

Very low contrast

• Bedeutet: Normaler Text hat ein Kontrastverhältnis unter 4,5:1, großer Text unter 3:1. Groß heißt laut WCAG mindestens 18 Punkt oder 14 Punkt fett (Definition in WCAG 2.2).
• Echt? Meistens. Ausnahmen nach 1.4.3: inaktive Bedienelemente, reine Dekoration, Logos. Liegt Text auf einem Hintergrundbild, verlangt WebAIM eine im CSS festgelegte Hintergrundfarbe, die auch ohne Bild genug Kontrast ergibt; ob der Text auf dem Foto selbst lesbar ist, prüfen Sie von Hand. Bei Transparenz, Farbverläufen oder Filtern meldet WAVE laut Dokumentation keine Kontrastfehler; solche Stellen prüfen Sie also immer selbst.
• Beheben: Text- oder Hintergrundfarbe in den Theme-Einstellungen ändern. Typische Stellen im Shop: Streich- und Grundpreise, Platzhaltertext, Hinweise wie „inkl. MwSt.“, Fußbereich, weiße Schrift auf hellen Schaltflächen oder Sale-Etiketten. Wie Sie das Verhältnis selbst messen und eine passende Farbe finden, zeigt Farbkontrast nach WCAG prüfen: 4,5:1 erklärt.
• Kriterium: 1.4.3 Kontrast (Minimum) (AA)
• Wer behebt es: Sie in den Farbeinstellungen des Themes, sonst Agentur oder Theme-Anbieter per CSS.

Checkliste: die häufigsten Alerts

Alerts sind kein Fehlerurteil. Die Tabelle sagt, wann ein Alert im Shop ein echtes Problem ist. Die wichtigsten Kriterien laut WAVE-Dokumentation, gelesen am 27.10.2026; die Spalten „Echt, wenn“ und „Beheben im Shop“ sind unsere Einschätzung auf Grundlage der Dokumentation.

Features, Structural Elements und ARIA richtig lesen

Diese drei Kategorien melden keine Fehler, aber sie zeigen Ihnen, was Sie von Hand prüfen sollten:

• Alternative text (Feature): Klicken Sie jedes grüne Bildsymbol an und lesen Sie den Text. WebAIM schreibt in der Hilfe, dass WAVE nicht beurteilen kann, ob ein Alternativtext gleichwertig und passend ist, und ihn deshalb anzeigt, damit Sie ihn bewerten.
• Null or empty alternative text (Feature): alt="" ist richtig für schmückende Bilder. Prüfen Sie, ob kein Produktbild darunter ist, das als einziges eine Information zeigt, etwa ein Farbmuster.
• Skip link und Skip link target (Feature): Sind beide da, testen Sie den Sprunglink trotzdem einmal mit der Tastatur.
• Structural Elements im Reiter Structure: Die Überschriften sollten sich lesen wie ein Inhaltsverzeichnis der Seite. Auf der Produktseite zum Beispiel: Produktname, dann Beschreibung, Details, Bewertungen, ähnliche Produkte.
• Data table: Für eine Größentabelle ist das gut. Prüfen Sie, ob Kopfzellen (th) vorhanden sind; WAVE zeigt sie als eigene Structural Elements.
• ARIA hidden: Laut WebAIM darf mit aria-hidden versteckter Inhalt keine Links oder Formularfelder enthalten. Ein Mini-Warenkorb, der mit aria-hidden versteckt ist, aber per Tastatur erreichbare Schaltflächen hat, ist nach unserer Lesart ein echter Fund für den Theme-Anbieter.
• ARIA alert or live region: zeigt, dass die Seite Statusmeldungen für Screenreader vorbereitet hat, etwa „Artikel wurde in den Warenkorb gelegt“. Ob die Meldung ankommt, hören Sie nur mit einem Screenreader.
• ARIA button und ARIA menu: Stellen, an denen ein Element sich per ARIA als Schaltfläche oder Menü ausgibt. Ob es sich auch mit Tastatur bedienen lässt, prüft WAVE nicht; testen Sie es mit dem Tastaturtest. Laut WAVE-Dokumentation ist role="menu" nur für Anwendungsmenüs gedacht, die mit den Pfeiltasten bedient werden, nicht für die Navigationslinks einer Website; trägt Ihr Hauptmenü diese Rolle, ist das ein Fund für den Theme-Anbieter.

Was WAVE nicht prüft

WebAIM sagt das selbst in der Hilfe: Nur ein Mensch kann beurteilen, ob eine Seite barrierefrei ist; die Abwesenheit von Errors heißt nicht, dass die Seite barrierefrei oder konform ist, und WebAIM vergibt deshalb weder ein „bestanden“ noch ein Siegel. Konkret für Ihren Shop:

• Keine Meldung zu Fokus, Zielgröße, Zoom und Umbruch. In der WAVE-Dokumentation ist keiner Meldung eines dieser Kriterien zugeordnet: 2.4.7 Fokus sichtbar, 2.4.11 Fokus nicht verdeckt, 2.5.8 Zielgröße (Minimum), 1.4.4 Textgröße ändern, 1.4.10 Umbruch, 1.4.11 Nicht-Text-Kontrast, 1.4.1 Benutzung von Farbe und 3.3.8 Barrierefreie Authentifizierung (gezählt am 27.10.2026).
• Keine Bedienung. WAVE sieht Code, keine Abläufe. Ob Sie Größe wählen, in den Warenkorb legen und bis zur Zahlungsart kommen, ohne in einem Dialog festzustecken, zeigt nur der Tastaturtest in 10 Minuten.
• Keine Qualität von Texten. Ob Alternativtexte, Linktexte, Überschriften und Fehlermeldungen verständlich sind, beurteilen Sie selbst.
• Nur die Seite, die gerade offen ist. Jeder Zustand nach einem Klick ist eine neue Prüfung. Die Online-Version führt zudem nicht immer alle Skripte aus.
• Verschiedene Ergebnisse je Version. Laut Hilfe können Online-Version, Erweiterung und API für dieselbe Seite unterschiedliche Ergebnisse liefern.

Auch das W3C betont in seiner Anleitung zur Auswahl von Prüfwerkzeugen: „Tools cannot check all accessibility aspects automatically.“ Wollen Sie ein zweites Werkzeug mit anderer Regelbasis danebenlegen, zeigt der Artikel Lighthouse-Barrierefreiheit selbst prüfen, wie Sie den Lighthouse-Wert richtig lesen.

Protokollvordruck

Kopieren Sie die Tabelle in ein Dokument oder eine Tabellenkalkulation. Eine Zeile je Fund; dieselbe Ursache an mehreren Stellen ist eine Zeile mit Anzahl.

Kopfdaten: Datum: ______ · Geprüft von: ______ · Browser und WAVE-Version (Erweiterung oder online): ______ · Theme und Version: ______ · Anlass (Erstprüfung, Update, neues Plugin): ______

So beschreiben Sie einen Fund für Ihre Agentur: „Produktseite Leinenkissen, WAVE-Erweiterung in Firefox, Error ‚Empty button‘, 2 Mal: Plus und Minus am Mengenfeld haben keinen Namen. Kriterien laut WAVE 1.1.1 und 2.4.4. Code-Ausschnitt anbei.“ Nennen Sie Seite, Zustand, Meldung und den Ausschnitt aus dem Code-Reiter.

Reihenfolge beim Beheben, unser Vorschlag: zuerst Errors im Warenkorb und Checkout, dann auf der Produktseite, dann auf der Startseite; danach Contrast Errors nach Farbe gebündelt; zuletzt die echten Alerts. Nach jeder Änderung starten Sie WAVE auf derselben Seite erneut.

Ihr nächster Schritt

Wenn Sie nicht jede Seite selbst mit WAVE durchgehen möchten, machen Sie den kostenlosen Scan. Der Gratis-Scan prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Wie WAVE ist er ein automatischer Test und ersetzt den Tastaturtest und Ihren eigenen Blick auf Texte und Abläufe nicht.

Stand: 27.10.2026. Quellen gelesen am 27.10.2026.