Zum Inhalt springen

Barrierefreiheits-Checker

Kurze Antwort

Prüfen Sie die gerenderte Seite anhand der automatisiert prüfbaren WCAG-2.1-Regeln der Stufen A und AA, einschließlich Farbkontrast. Jedes Problem verweist auf sein WCAG-Kriterium und die Anforderung des European Accessibility Act.

Was es nicht leistet: Automatische Regeln finden nur einen Teil der WCAG-Probleme: Tastaturbedienung, Bedeutung, Untertitel und viele weitere Kriterien brauchen einen Menschen. Das Ergebnis ist daher nie ein Urteil über Konformität, und von Skripten erzeugte Inhalte können fehlen.

Kostenlos · Ohne Anmeldung · Läuft im Browser

Testet die gerenderte Seite anhand der WCAG-2.1-Regeln der Stufen A und AA, die sich automatisiert prüfen lassen.

Läuft in deinem Browser. Bei einer URL ruft RankProof das HTML der Seite ab; dein Browser lädt dann deren Stile und Bilder von der Website, um Kontrast und Layout zu messen. Die eigenen Skripte der Seite werden nicht ausgeführt.

Was es macht

Rendert die Seite in Ihrem Browser und prüft sie anhand der WCAG 2.1 Regeln der Stufen A und AA, die sich automatisiert testen lassen: Farbkontrast des gerenderten Textes, Bezeichnungen von Schaltflächen, Links und Formularfeldern, Alternativtexte für Bilder, Überschriften und Landmarken, ARIA-Einsatz und Seitensprache, unter anderem. Jedes Problem wird nach Schweregrad bewertet, zeigt die betroffenen Elemente und was zu beheben ist, und verlinkt das zugehörige WCAG-Erfolgskriterium sowie die Anforderung aus Anhang I des Europäischen Rechtsakts zur Barrierefreiheit (Richtlinie 2019/882), auf die es sich bezieht. Prüfungen, die eine manuelle Kontrolle erfordern, werden gesondert aufgeführt.

Warum es wichtig ist

Der Europäische Rechtsakt zur Barrierefreiheit (EAA) gilt seit dem 28. Juni 2025 für viele digitale Produkte und Dienstleistungen, die in der EU verkauft werden, und jeder Mitgliedstaat legt eigene Sanktionen fest und setzt sie durch. Unabhängig vom Gesetz schließen Barrierefreiheitsprobleme reale Besucher aus. Eine automatisierte Prüfung ist der schnellste Weg, die offensichtlichen Mängel vor einer manuellen Prüfung zu finden.

Wie es funktioniert

  1. Geben Sie eine Seiten-URL ein oder fügen Sie den HTML-Code der Seite ein

  2. RankProof ruft den HTML-Code ab; Ihr Browser rendert ihn mit den eigenen Stilen und Bildern der Seite, ohne die Skripte der Seite auszuführen

  3. Eine Open-Source-Regel-Engine prüft die gerenderte Seite anhand der WCAG 2.1 Regeln der Stufen A und AA

  4. Die Ergebnisse werden nach Schweregrad zurückgegeben, mit den betroffenen Elementen, was zu beheben ist, sowie den Verweisen auf WCAG und EAA

Beispiel-Ein- und Ausgabe

EINGABE
url: https://rankproof.eu
AUSGABE
Barrierefreiheits-Scan (WCAG-2.1-Regeln A und AA):

Keine Probleme, die automatisierte Regeln erkennen können

Bestandene Regeln: 22 · Manuell zu prüfen: 1

Muss manuell geprüft werden
  Farbkontrast · WCAG 1.4.3 · EAA I.2.c

So lesen Sie das Ergebnis

Zusammenfassung (im Beispiel keine Probleme auf rankproof.eu)
Die Zahl der Probleme und der betroffenen Elemente der Seite, oder eine Zeile, dass die automatisierten Regeln nichts gefunden haben. Im Beispiel fand die Prüfung auf rankproof.eu kein Problem. Das ist kein Urteil über Konformität: Die Regeln decken nur einen Teil von WCAG 2.1 AA ab.
Auswirkung: kritisch, schwerwiegend, mittel, gering
Jedes Problem trägt die Einstufung der Regel-Engine selbst, und die schwersten stehen oben. Kritische und schwerwiegende Probleme blockieren oder bremsen manche Nutzer stark — ein Button ohne Namen, zu blasser Text —, also beginnen Sie dort.
Betroffene Elemente
Unter jedem Problem die fehlerhaften Elemente als HTML, mit dem, was zu ändern ist. Ein Problem betrifft oft viele Elemente aus derselben Vorlage, sodass eine einzige Korrektur alle beheben kann.
WCAG- und EAA-Verweise
Jedes Problem verlinkt das geprüfte WCAG-2.1-Erfolgskriterium und den Punkt unserer Checkliste zum European Accessibility Act, unter dem es abgelegt ist und der den Teil der Richtlinie nennt, aus dem er stammt — beim Farbkontrast WCAG 1.4.3 und EAA I.2.c.
Bestandene Regeln (22)
Wie viele Regeln auf dieser Seite angewendet wurden, ohne etwas zu finden. Die Zahl ändert sich von Seite zu Seite: Eine Seite ohne Formular durchläuft die Formularregeln nicht.
Muss manuell geprüft werden (1)
Fälle, die die Regeln nicht selbst entscheiden konnten, etwa Text über einem Bild. Im Beispiel ist es der Farbkontrast (WCAG 1.4.3): Bei einem Text konnte die Engine den Hintergrund nicht bestimmen, daher muss dieses Paar per Auge oder mit dem Farbkontrast-Prüfer geprüft werden.
Vorschau
Die Seite, wie Ihr Browser sie für die Prüfung dargestellt hat, ohne ihre Scripts auszuführen. Ist sie fast leer, wird die Seite wahrscheinlich per JavaScript aufgebaut, und das Tool sagt es: Fügen Sie dann das gerenderte HTML ein.

Wer es nutzt

  • EU-Unternehmer

    Führen Sie jetzt, da der EAA gilt, eine Basisprüfung durch und sehen Sie, welche WCAG-Verstöße zuerst behoben werden sollten.

  • Berater für Barrierefreiheit

    Erhalten Sie einen schnellen ersten Überblick über eine Kundenseite, mit Problemen gruppiert nach Schweregrad und zugeordnet zu EAA-Anforderungen, vor der manuellen Prüfung.

  • Webentwickler

    Führen Sie die Prüfung vor jedem Release erneut auf Staging-Seiten durch, um Barrierefreiheits-Regressionen zu erkennen, bevor sie in die Produktion gelangen.

Häufige Probleme und ihre Lösung

  1. Bilder ohne Textalternative (WCAG 1.1.1)

    Geben Sie informativen Bildern einen Alt-Text, der sagt, was sie zeigen oder bewirken, und dekorativen alt="". Ein Bild in einem Link oder Button braucht einen Alt-Text, der Ziel oder Aktion nennt.

    <img src="/signups.png" alt="Bar chart: sign-ups doubled from March to June">
<img src="/divider.svg" alt="">

  2. Text mit zu wenig Kontrast (WCAG 1.4.3)

    Dunkeln Sie den Text ab oder hellen Sie den Hintergrund auf, bis normaler Text 4,5:1 und großer Text 3:1 erreicht. Ändern Sie die Farbe im Theme statt an einzelnen Elementen, damit alle Komponenten folgen.

    :root {
  --text: #1f2937;       /* 14.7:1 on #ffffff */
  --text-muted: #595959; /*  7.0:1 on #ffffff */
}

  3. Formularfelder ohne Label (WCAG 1.3.1, 4.1.2)

    Verbinden Sie jedes Feld über for und id mit einem sichtbaren <label>. Ein Platzhalter ist kein Label: Er verschwindet, sobald man tippt.

    <label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">

  4. Buttons und Links ohne Namen (WCAG 4.1.2, 2.4.4)

    Ein Button nur mit Icon braucht eine Textalternative: sichtbaren Text, einen Alt-Text am Bild oder ein aria-label. Linktext sollte sagen, wohin der Link führt, nicht „hier klicken“.

    <button type="button" aria-label="Close menu">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

  5. Keine Seitensprache (WCAG 3.1.1)

    Setzen Sie lang am <html>-Element auf die Sprache der Seite, damit Screenreader richtig aussprechen, und lang an jeder Passage in einer anderen Sprache.

    <html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  6. Was die Regeln nicht prüfen können

    Erreichen und bedienen Sie jedes Bedienelement nur mit der Tastatur, prüfen Sie, dass der Fokus sichtbar ist, dass Videos Untertitel haben und Fehlermeldungen sagen, wie die Eingabe zu korrigieren ist. Die manuelle Checkliste auf der Seite der EAA-Anforderungen fasst diese Prüfungen zusammen.

Häufig gestellte Fragen

Was ist WCAG 2.1?
Die Web Content Accessibility Guidelines 2.1 (WCAG 2.1) sind der W3C-Standard für Barrierefreiheit im Web. In der EU wendet die harmonisierte Norm EN 301 549 v3.2.1 die Stufe AA von WCAG 2.1 auf Webinhalte an, weshalb dieser Checker die Regeln der Stufen A und AA aus WCAG 2.1 verwendet.
Was ist der Europäische Rechtsakt zur Barrierefreiheit (EAA)?
Die Richtlinie (EU) 2019/882 legt Barrierefreiheitsanforderungen für viele Produkte und Dienstleistungen fest, die in der EU verkauft werden, darunter E-Commerce, Bankwesen und E-Books. Sie gilt seit dem 28. Juni 2025.
Was übersieht eine automatisierte Prüfung?
Vieles. Automatisierte Regeln finden nur einen Teil der Probleme: ob Alternativtexte sinnvoll sind, ob die Lesereihenfolge Sinn ergibt, ob Untertitel korrekt sind. Der Bericht listet die Punkte auf, die eine manuelle Kontrolle erfordern, und die Seite mit den EAA-Anforderungen enthält eine Checkliste für manuelle Prüfungen. Betrachten Sie den Scan als ersten Schritt und testen Sie anschließend mit Tastatur und Screenreader.
Prüft er den Farbkontrast?
Ja, für Text auf einfarbigen Hintergründen der gerenderten Seite. Text über Bildern oder Farbverläufen kann nicht automatisch gemessen werden und wird als manuell zu prüfen aufgeführt. Für ein einzelnes Farbpaar nutzen Sie den Farbkontrast-Prüfer.
Funktioniert er bei Websites, die mit JavaScript erstellt wurden?
Nur teilweise. Die Skripte der Seite werden nicht ausgeführt, sodass Inhalte, die JavaScript erst nach dem Laden hinzufügt, im Scan fehlen. Der Bericht warnt Sie, wenn eine Seite mit fast keinem Text gerendert wird.
Was ist der Unterschied zwischen WCAG 2.1 und 2.2?
WCAG 2.2 fügt WCAG 2.1 neun Erfolgskriterien hinzu und entfernt eines (4.1.1 Parsing). Zu den neuen Kriterien der Stufe AA gehören Fokus nicht verdeckt (2.4.11), Ziehbewegungen (2.5.7), Zielgröße (2.5.8) und Zugängliche Authentifizierung (3.3.8). EU-Webinhalte werden über EN 301 549 v3.2.1 an WCAG 2.1 AA gemessen.

Quellen

Die Dokumentation, auf der dieses Tool und die Erklärungen auf dieser Seite beruhen.

Kostenlose Tools zum Thema

Ratgeber zum Thema

Studiendaten zum Thema

Verwandte Tools in EAA-Konformität

Alle EAA-Konformität-Tools anzeigen