Ratgeber

axe DevTools: den Shop selbst prüfen und Meldungen beheben

Veröffentlicht am 28. Oktober 2026

Mit der kostenlosen Browser-Erweiterung axe DevTools prüfen Sie eine Shopseite in wenigen Minuten selbst: Entwicklertools öffnen, Reiter „axe DevTools“ wählen, „Full Page Scan“ klicken und die Meldungen nach Schweregrad abarbeiten. Die Gratisversion findet automatisch prüfbare Fehler auf jeweils einer Seite; Tastatur, Screenreader und die Qualität Ihrer Texte müssen Sie danach weiter von Hand prüfen.

Dieser Artikel zeigt die Bedienung Schritt für Schritt, übertragen auf Startseite, Produktseite und Warenkorb, dazu eine Tabelle typischer Shop-Meldungen mit WCAG-Kriterium und Behebung, eine Protokollvorlage und eine Checkliste. Er gehört zu unserer Anleitung Website auf Barrierefreiheit prüfen. Welche WCAG-Kriterien die zugrunde liegende Prüfmaschine axe-core überhaupt abdeckt, zählt der Artikel WCAG-Check online aus.

Was axe DevTools ist und was die Gratisversion kann

axe DevTools ist eine Erweiterung des Herstellers Deque für Chrome, Edge und Firefox. Sie nutzt die quelloffene Prüfbibliothek axe-core, die nach Angabe von Deque im Durchschnitt 57 Prozent der WCAG-Probleme automatisch findet (axe-core auf GitHub). Deque beschreibt die kostenlose Version so: Sie bietet nur automatisierte Tests, und Sie testen jeweils eine Seite (Deque, Produktseite der Erweiterung).

Was in welcher Version enthalten ist, steht in der Herstellerdoku unter „Feature Availability“ (Deque Docs: axe DevTools Extension):

Preise nennt Deque auf seiner Preisseite nicht. Dort steht, dass die Testversion von Pro keine Zahlungsdaten verlangt und das Konto nach Ablauf automatisch auf den Gratisplan zurückfällt. Die Testversion läuft laut Deque 14 Tage (Deque, Produktseite der Erweiterung).

Schritt 1: Erweiterung installieren

1. Öffnen Sie die Seite für Ihren Browser: Chrome Web Store, Edge Add-ons oder Firefox Add-ons.
2. Klicken Sie auf Installieren und bestätigen Sie die Abfrage des Browsers.
3. Ein axe-Konto brauchen Sie laut Doku für Pro und die Testversion; für den Full Page Scan der Gratisversion nennt die Doku keins (Deque Docs).

Zwei Dinge sollten Sie vorher wissen:

• Chrome oder Edge nehmen. In Firefox gibt es laut Deque nur eine eingeschränkte Version; Pro-Funktionen laufen nur in Chrome und Edge (Deque Docs).
• Die Oberfläche ist englisch. Als Sprachen bietet die Erweiterung Englisch, Französisch und Japanisch an, Deutsch nicht (Deque Docs: Configuration). Wir nennen die Knöpfe deshalb in diesem Artikel mit ihrem englischen Namen.

Schritt 2: Prüfstandard einstellen

Öffnen Sie in der Erweiterung oben das Menü „Options“ (drei Punkte) und dann „Settings“ (Deque Docs: Configuration). Zwei Einstellungen lohnen sich:

• „Select accessibility standard“ auf „WCAG 2.2 AA“. Damit filtert axe die Ergebnisse auf die Kriterien der Stufen A und AA von WCAG 2.2. Unsere Empfehlung, weil WCAG 2.2 die aktuelle Fassung der Richtlinien ist.
• „Best Practices“ auf „Enable“. Standardmäßig ist es ausgeschaltet. Best Practices sind laut Deque Meldungen, die nicht zwingend einem WCAG-Kriterium entsprechen, aber als anerkannte Praxis gelten (Deque Docs: Scanning); dazu gehört laut Regelliste von axe-core etwa die Reihenfolge der Überschriften.

Beide Einstellungen wirken als Filter: Sie müssen den Scan nach einer Änderung nicht wiederholen (Deque Docs: Configuration).

Schritt 3: Seite scannen

1. Öffnen Sie die Shopseite, die Sie prüfen wollen, und schließen oder bestätigen Sie den Cookie-Banner. Unsere Empfehlung: Prüfen Sie den Banner einmal getrennt, solange er offen ist, und danach die Seite ohne Banner.
2. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Untersuchen“, oder drücken Sie Strg + Umschalttaste + I (Windows) bzw. Cmd + Option + I (Mac) (Chrome-Doku: DevTools öffnen, Deque Docs).
3. Wählen Sie in den Entwicklertools den Reiter „axe DevTools“. Fehlt er, steckt er laut Deque hinter dem Symbol „>>“ für weitere Reiter.
4. Klicken Sie auf „Full Page Scan“ (Deque Docs: Scanning).

Startet der Scan nicht oder lädt er endlos, nennt Deque zwei Ursachen: ein Werbe- oder Inhaltsblocker wie uBlock Origin Lite, der ein Skript der Erweiterung blockiert, oder eine andere Erweiterung, die Seiteninhalte verändert, etwa Grammarly. Abhilfe: die Erweiterung im Blocker erlauben oder die störende Erweiterung unter chrome://extensions (Chrome) bzw. edge://extensions (Edge) abschalten und die Seite neu laden (Deque Docs: Troubleshooting).

Schritt 4: Ergebnisse lesen

Die Übersicht zeigt die geprüfte Adresse, einen Knopf „Re-run“ für einen neuen Scan und die Gesamtzahl der Meldungen. Darunter teilen Filter die Meldungen auf (Deque Docs: Scanning):

Die Meldungen sind nach Regel gruppiert. Ein Klick auf eine Regel klappt die einzelnen Fundstellen auf.

Schweregrade: womit Sie anfangen

axe-core ordnet jedem Fehler einen von vier Schweregraden zu: „minor“, „moderate“, „serious“ oder „critical“, also wie schwer der Verstoß wiegt (axe-core API-Dokumentation). Welchen Grad eine Regel hat, steht in der Regelliste von axe-core.

Unsere Empfehlung: Arbeiten Sie Critical und Serious zuerst ab, und zwar auf den Seiten, über die Kunden kaufen. Ein Knopf ohne Namen im Warenkorb wiegt für Sie schwerer als eine falsche Überschriftenstufe im Blog.

„Needs Review“: Was Sie selbst entscheiden

Unter „Needs Review“ stehen Stellen, die axe-core nicht sicher bewerten konnte. Laut Deque betrifft das oft den Farbkontrast von Text über Hintergrundbildern oder Farbverläufen (Deque Docs: Scanning). Diese Einträge sind kein Freispruch und kein Fehler, sondern eine Aufgabe für Sie:

1. Mit „Highlight“ die Stelle auf der Seite finden.
2. Bei Kontrast: die beiden Farben selbst messen, wie in Farbkontrast nach WCAG prüfen beschrieben. Normaler Text braucht mindestens 4,5 : 1, großer Text 3 : 1 (W3C Understanding 1.4.3). Bei Text über einem Foto messen Sie an der hellsten bzw. dunkelsten Stelle hinter dem Text (unsere Empfehlung).
3. Ergebnis ins Protokoll schreiben: Fehler oder in Ordnung, mit Begründung.

Highlight und Inspect: den Fehler finden

Zu jeder Fundstelle zeigt axe laut Doku (Deque Docs: Scanning):

• Highlight: markiert das betroffene Element auf der Seite. So sehen Sie, ob es um das Logo, ein Produktbild oder ein Symbol im Kopfbereich geht.
• Element location: der CSS-Selektor, also die technische Adresse des Elements. Kopieren Sie ihn ins Protokoll; Ihr Entwickler findet das Element damit sofort.
• Inspect Element: springt in den Bereich „Elemente“ der Entwicklertools zum Quellcode des Elements.
• Source code: der HTML-Ausschnitt des Elements.
• Remediation guidance: der Behebungshinweis, auf Englisch.
• more information: Link zur Regelseite bei Deque University mit Erklärung und Beispielen.

Intelligent Guided Tests: was sie leisten und was kostet

Die Intelligent Guided Tests (IGTs) stellen Ihnen nach einem gespeicherten Scan einfache Fragen zur Seite und prüfen daraus Dinge, die ein automatischer Scan nicht erkennt (Deque Docs: IGT). Es gibt sie für Tabellen, Tastatur, modale Dialoge, interaktive Elemente, Bilder, Struktur und Formulare.

IGTs setzen das Speichern eines Tests voraus, und Speichern gehört zu Pro (Deque Docs: Scanning). Gleiches gilt für die Checkliste „Remaining Testing“, die laut Deque auflistet, was für WCAG 2.2 A und AA noch von Hand zu prüfen ist (Deque Docs: Remaining Testing). Mit der 14-tägigen Testversion können Sie beides ausprobieren.

Unsere Einschätzung: Für einen kleinen Shop ist Pro kein Muss. Den Teil, den die IGTs abdecken, prüfen Sie kostenlos mit dem Tastaturtest und einem Screenreader-Test. Das dauert länger, verlangt aber kein Abo.

So prüfen Sie Startseite, Produktseite und Warenkorb

Die Gratisversion prüft immer die Seite, die gerade offen ist, und nur einmal pro Klick. Viele Shop-Elemente erscheinen erst nach einer Aktion. Unsere Empfehlung: Stellen Sie jeden Zustand her und klicken Sie dann auf „Re-run“.

Den Checkout mit Adress- und Zahlungsfeldern prüfen Sie genauso, Schritt für Schritt bis vor die Zahlung.

Typische Meldungen im Shop: Bedeutung und Behebung

Die Tabelle nennt Regeln aus der Regelliste von axe-core, die Shop-Elemente betreffen. Schweregrad und WCAG-Kriterium stammen aus dieser Liste. Die Spalte „Wo im Shop“ zeigt mögliche Stellen, keine Häufigkeit.

Ein Fehler, der im Theme steckt, taucht auf jeder Seite auf, die dieses Theme nutzt. Unsere Empfehlung: Beheben Sie sie einmal im Theme oder melden Sie sie dem Theme-Anbieter, statt Seite für Seite zu arbeiten.

Was axe DevTools nicht findet

Deque selbst schreibt, dass kein automatisches System eine 100-prozentige Konformität mit einem Standard prüfen kann (Deque Docs: Rulesets). Für Ihren Shop heißt das:

• Ob ein Alternativtext stimmt, prüft axe nicht. „Bild1.jpg“ als Alternativtext besteht die Regel image-alt, hilft aber niemandem. Prüfen Sie die Texte selbst.
• Ob sich der Shop mit der Tastatur bedienen lässt, also Reihenfolge, sichtbarer Fokus und Fokusfallen in Menü oder Warenkorb, zeigt nur ein Tastaturtest.
• Ob ein Screenreader den Kauf schafft, etwa ob Fehlermeldungen und Warenkorb-Änderungen angesagt werden, zeigt nur ein Screenreader-Test.
• Was nicht auf der geprüften Seite ist, sieht die Gratisversion nicht: Sie prüft eine Seite pro Scan. Weitere Seiten, PDFs und den Ablauf über mehrere Schritte prüfen Sie getrennt.
• Null Meldungen heißt nicht barrierefrei. Es heißt nur, dass die automatisch prüfbaren Regeln auf diesem Zustand der Seite bestanden sind.

Protokoll: so dokumentieren Sie die Prüfung

Export und Speichern gibt es nur in Pro (Deque Docs). In der Gratisversion halten Sie die Ergebnisse selbst fest, zum Beispiel in einer Tabelle mit diesen Spalten:

Notieren Sie auch die geprüften Seiten ohne Meldungen und die „Needs Review“-Einträge mit Ihrer Entscheidung. Nach jeder Behebung scannen Sie dieselbe Seite im selben Zustand erneut und tragen das Ergebnis in „Nachtest ok“ ein.

Checkliste axe DevTools

• Erweiterung in Chrome oder Edge installiert
• In den Settings „WCAG 2.2 AA“ gewählt und „Best Practices“ eingeschaltet
• Werbe- und Inhaltsblocker für die Erweiterung freigegeben, falls der Scan nicht startet
• Startseite gescannt: mit Cookie-Banner, ohne Banner, mit offenem Menü, mit offener Suche
• Produktseite gescannt: Ausgangszustand, Variante gewählt, Fehlermeldung, Bildergalerie
• Warenkorb gescannt: mit Artikel, nach Mengenänderung, Gutschein mit Fehler, Mini-Warenkorb offen
• Checkout bis vor die Zahlung gescannt
• Alle Critical- und Serious-Meldungen ins Protokoll übernommen, mit Selektor
• Jeden „Needs Review“-Eintrag selbst entschieden und begründet
• Fehler, die auf jeder Seite auftreten, einmal im Theme behoben oder dem Theme-Anbieter gemeldet
• Nach jeder Behebung denselben Zustand erneut gescannt
• Alternativtexte inhaltlich geprüft
• Tastaturtest und Screenreader-Test gemacht

Ihr nächster Schritt

Dieser Ratgeber ist keine Rechtsberatung.

Machen Sie zusätzlich den kostenlosen Scan. Er prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Wie axe DevTools findet er als automatische Prüfung nur einen Teil der Barrieren; den Tastaturtest, den Screenreader-Test und die Prüfung Ihrer Texte übernehmen Sie selbst.

Stand: 28.10.2026. Quellen gelesen am 28.10.2026.