Kostenloses Tool: Barrierefreiheit

Website auf Barrierefreiheit prüfen

Geben Sie Ihre Adresse ein, und wir testen diese Seite und bis zu vier weitere wichtige Seiten in einem echten Browser anhand der Regeln von WCAG 2.2 Stufe A und AA. Zu jeder Barriere erhalten Sie das Element, die Seite, einen Screenshot und eine Erklärung, wen sie betrifft.

Kostenlos. Testet bis zu fünf wichtige Seiten in etwa einer Minute.

Was dieses Tool prüft

  • Fünf Seiten, die Ihre Website repräsentieren

    Die Seite, die Sie eingeben, und bis zu vier weitere, die passend zur Art der Website aus ihren Links ausgewählt werden. Bei einem Shop sind das eine Kollektion, ein Produkt, der Warenkorb und eine Inhaltsseite; bei anderen Websites etwa die Preis- oder Kontaktseite, ein Artikel oder eine Leistungsseite. Templates wiederholen sich, daher zeigt eine Produktseite meist die Probleme aller Produktseiten.

  • WCAG-Regeln auf der gerenderten Seite

    Jede Seite wird in Chromium mit 1366 × 900 geladen, und axe-core, die Open-Source-Regel-Engine von Deque, führt ihre Regeln für WCAG 2.0, 2.1 und 2.2 Stufe A und AA aus, nachdem die Skripte der Seite gelaufen sind. So werden auch Probleme erfasst, die ein Theme oder eine App erst erzeugt, wenn die Seite im Browser aufgebaut wird.

  • Schweregrad und Erfolgskriterien

    Jede nicht bestandene Regel zeigt ihren Schweregrad (kritisch, schwerwiegend, mittel oder gering), die WCAG-Erfolgskriterien, denen sie zugeordnet ist, und wie viele Elemente und Seiten sie betrifft.

  • Das fehlerhafte Element, markiert

    Der HTML-Code eines Beispielelements und ein Screenshot der Seite, auf dem dieses Element umrandet ist, damit Sie oder Ihre Entwickler es im Template finden, ohne raten zu müssen.

  • Punkte, die ein Mensch entscheiden muss

    Findet axe-core etwas, das es nicht entscheiden kann, etwa Text über einem Hintergrundbild, dessen Kontrast sich nicht messen lässt, wird der Punkt als „zu prüfen“ aufgeführt. Er wird nie als Fehler gezählt.

  • Ein Tastaturtest

    Auf der ersten Seite drücken wir 40-mal die Tabulatortaste und zeichnen auf, wohin der Fokus geht: ob er sich überhaupt bewegt, ob er in einer Schleife hängen bleibt (oft in einem Cookie-Banner), ob der erste Halt ein Skip-Link ist und welche fokussierten Elemente keinen sichtbaren Fokusindikator zeigen. Diese letzte Prüfung ist eine Heuristik und wird daher als „zu prüfen“ angezeigt.

Was es nicht prüfen kann

  • Hören, was ein Screenreader ansagt. Software kann bestätigen, dass ein Button einen Namen hat, aber nicht, dass dieser Name beim Vorlesen sinnvoll ist.
  • Untertitel, Transkripte oder Audiodeskriptionen für Video und Audio beurteilen.
  • Kognitive und inhaltliche Kriterien bewerten, etwa ob Anleitungen verständlich sind oder Fehlermeldungen Menschen helfen, den Fehler zu beheben.
  • Seiten hinter einem Login, einem Passwort oder einem Bot-Schutz testen oder einen Checkout durchlaufen.
  • Ihnen sagen, ob Ihre Website WCAG-konform ist oder ein Gesetz erfüllt. Automatisierte Regeln finden einen Teil der Probleme; für den Rest braucht es Menschen.

Warum das wichtig ist

Barrieren sind oft kleine Fehler im Template mit großer Wirkung. Ein Warenkorb-Button, der nur aus einem Icon besteht und keinen zugänglichen Namen hat, wird nur als „Button“ angesagt, sodass Screenreader-Nutzer nicht erkennen, was er tut. Grauer Text auf Weiß, der das Kontrastverhältnis von 4,5:1 verfehlt, ist für viele Menschen mit Sehbehinderung schwer zu lesen, und für alle, die ihr Smartphone in hellem Sonnenlicht nutzen.

Da derselbe Header, dieselbe Produktkarte und derselbe Footer auf jeder Seite erscheinen, kann eine einzige Korrektur im Template Hunderte von Fehlern auf einmal beseitigen. Deshalb werden die Ergebnisse nach Regel gruppiert, mit der Anzahl der Elemente und Seiten, statt jedes Vorkommen als eigenes Problem aufzulisten.

Barrierefreiheit hat in vielen Ländern auch eine rechtliche Seite. Ein Scan kann Ihnen nicht sagen, ob ein Gesetz für Sie gilt oder ob Sie es erfüllen. Er gibt Ihnen eine datierte Liste echter Barrieren auf Ihren eigenen Seiten, und das ist in jedem Fall der praktische Ausgangspunkt.

So lesen Sie die Ergebnisse

Kritisch
Die Barriere kann manche Menschen ganz daran hindern, das Element zu nutzen, zum Beispiel ein Formularfeld ohne Label oder ein Button ohne Namen. Beheben Sie diese zuerst.
Schwerwiegend
Die Barriere erschwert manchen Menschen eine Aufgabe erheblich, etwa Fließtext, der das Kontrastverhältnis verfehlt.
Mittel
Die Barriere verursacht Schwierigkeiten oder Verwirrung, lässt sich aber meist umgehen.
Gering
Ein kleines Problem oder Ärgernis. Trotzdem lohnt es sich, es beim nächsten Bearbeiten des Templates zu beheben.
WCAG-Erfolgskriterien
Die Nummern neben einer Regel, etwa 1.1.1 oder 1.4.3, sind die Kriterien, die sie testet. Eine Regel ohne Kriterium ist eine bewährte Praxis (Best Practice) und keine WCAG-Anforderung.
Elemente und Seiten
Wie viele Elemente die Regel nicht bestanden haben und auf wie vielen der getesteten Seiten. Eine Regel, die auf jeder Seite fehlschlägt, steckt meist in einem gemeinsamen Teil wie Header, Menü oder Footer.
Zu prüfen
axe-core hat etwas gefunden, das es nicht entscheiden konnte. Sehen Sie sich das Element selbst an: Es kann bestehen oder fehlschlagen. Diese Punkte werden nicht als Fehler gezählt.
Fokusfalle
Die Tabulatortaste bewegte den Fokus immer wieder durch dieselben wenigen Elemente. Gehören sie zu einem Cookie-Banner, erreichen Tastaturnutzer den Rest der Seite möglicherweise nicht.
Fokus bewegt sich nicht (Focus doesn’t move)
Das Drücken der Tabulatortaste hat nie etwas fokussiert. Links und Buttons sind womöglich aus div- oder span-Elementen gebaut, oder ein Skript fängt die Taste ab.
Skip-Link
Ob der erste Tab-Halt ein Link „Zum Inhalt springen“ ist. Ohne ihn müssen sich Tastaturnutzer auf jeder Seite durch den gesamten Header tabben. Auch Landmarks und Überschriften können WCAG 2.4.1 Bypass Blocks erfüllen.
Kein sichtbarer Fokusindikator
Fokussierte Elemente, bei denen wir keine Umrandung (Outline), keinen Schatten (Box Shadow) und keine Unterstreichung gesehen haben. Ein anderer Stil, etwa eine Farbänderung, kann trotzdem sichtbar sein, gehen Sie diese Elemente daher selbst mit der Tabulatortaste durch.

So beheben Sie die häufigsten Probleme

  • Text, der das Kontrastverhältnis verfehlt

    Normaler Text braucht mindestens 4,5:1 gegenüber seinem Hintergrund, großer Text (etwa 24 px oder etwa 18,7 px fett) braucht 3:1. Ändern Sie die Farbe in den Theme-Einstellungen oder Design-Tokens statt Element für Element, und prüfen Sie danach Platzhaltertext, Hover-Zustände und Text über Bildern erneut.

  • Bilder ohne Alternativtext

    Geben Sie jedem bedeutungstragenden Bild ein alt-Attribut, das sagt, was es zeigt oder bewirkt, etwa Produktname und Farbe. Dekorative Bilder erhalten ein leeres alt (alt=""), damit Screenreader sie überspringen. Bei Shopify fügen Sie den Alternativtext am Bild im Bereich „Medien“ des Produkts hinzu; bei WordPress im Feld „Alternativtext“ der Mediathek.

  • Formularfelder ohne Label

    Verknüpfen Sie jedes Eingabefeld mit einem Label über <label for>, das zur id des Felds passt, oder verwenden Sie aria-label, wenn es keinen sichtbaren Text gibt. Verlassen Sie sich nicht auf Platzhaltertext als einziges Label: Er verschwindet, sobald jemand tippt. Newsletter-Anmeldungen und Suchfelder im Header sind die üblichen Kandidaten.

  • Buttons und Links ohne zugänglichen Namen

    Icon-Bedienelemente für Warenkorb, Suche, Menü oder Social-Media-Profile enthalten oft nur ein SVG. Ergänzen Sie sichtbaren Text oder ein aria-label, das sagt, was das Element tut („Warenkorb öffnen“, nicht „Icon“), und setzen Sie aria-hidden="true" auf das SVG selbst.

  • Ein Cookie-Banner, das den Fokus festhält

    Stellen Sie sicher, dass jeder Button im Banner per Tabulatortaste erreichbar und mit Enter oder Leertaste bedienbar ist, dass der Fokus nach dem Schließen des Banners zur Seite zurückkehrt und dass ein Banner, das die Seite nicht blockiert, den Fokus gar nicht festhält. Prüfen Sie die Einstellungen Ihres Consent-Tools und aktualisieren Sie es, wenn das Skript veraltet ist.

  • Per CSS entfernte Fokus-Umrandungen

    Durchsuchen Sie Ihre Stylesheets nach outline: none oder outline: 0 bei Links, Buttons und :focus. Ersetzen Sie es durch einen sichtbaren Stil wie :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Fragen zu diesem Tool

Ist dieser Barrierefreiheits-Check kostenlos?

Ja. Eine Registrierung ist nicht nötig; Sie bestätigen nur, dass Sie die Website besitzen oder verwalten. Der kostenpflichtige Barrierefreiheits-Report ergänzt bis zu 20 weitere Seiten aus Ihrer Sitemap, einen Durchlauf nur per Tastatur, eine Reflow-Prüfung bei 320 px, Vorher-nachher-Code auf Basis Ihres fehlerhaften Markups, KI-Prompts, ein PDF und 5 Nachtests.

Wie viel von WCAG kann ein automatisiertes Prüftool testen?

Nur einen Teil. Eine Regel kann prüfen, ob ein Bild einen Alternativtext hat, aber nicht, ob der Text das Bild beschreibt, und ob ein Feld ein Label hat, aber nicht, ob das Label verständlich ist. Betrachten Sie die Ergebnisse als Liste eindeutiger Probleme und testen Sie den Rest mit der Tastatur und einem Screenreader.

Wenn der Scan nichts findet, ist meine Website dann ADA- oder WCAG-konform?

Nein. Kein automatisierter Test kann zeigen, dass eine Website WCAG-konform ist oder den ADA, den European Accessibility Act oder ein anderes Gesetz erfüllt. Ein Ergebnis ohne Befunde bedeutet, dass die automatisierten Regeln auf den getesteten Seiten keine Fehler gefunden haben.

Kann ich eine Staging-Website oder Seiten hinter einem Login prüfen?

Seiten hinter einem Login, einem Passwort oder einem Bot-Schutz können nicht getestet werden. Wenn Ihr Bot-Schutz den Scan blockiert, lassen Sie den User-Agent FixReportsScanner zu oder testen Sie eine öffentliche Staging-Kopie.

Ich habe ein Problem behoben. Warum sieht das Ergebnis gleich aus?

Ergebnisse für dieselbe Adresse können aus einem Scan der letzten Stunde wiederverwendet werden. Warten Sie, bis diese Stunde vorbei ist, und leeren Sie einen etwaigen Seiten- oder CDN-Cache, bevor Sie erneut testen.

Quellen

Verwandte Tools

Der Barrierefreiheits-Report ($174, einmalig) baut auf dem vollständigen kostenlosen Scan auf und ergänzt weitere Seiten, die nötige Änderung für jeden Befund, ein PDF und Nachtests, mit denen Sie Ihre Korrekturen überprüfen.

Mehr zum Barrierefreiheits-Report