Barrierefreiheitszertifikat – Startseite

Unsere Prüfmethode, offen gelegt

Ein Siegel ist nur so viel wert wie die Prüfung dahinter. Deshalb steht hier, wie wir prüfen, was eine Maschine dabei leisten kann und was nicht.

Hände auf einer Laptop-Tastatur: Die rechte Hand liegt auf einer Braillezeile und liest mit. Die Person trägt Kopfhörer.

Kurz gesagt

Wir prüfen nach WCAG 2.2, Stufe AA: 55 Erfolgskriterien. Die Seiten wählen wir nach WCAG-EM aus, der Prüfmethode des W3C; automatische Tests mit axe-core und eigenen Messungen liefern Befunde und Screenshots. Danach entscheidet ein Mensch jedes Kriterium und testet mit dem Screenreader. Kein Kriterium gilt als erfüllt, nur weil eine Maschine keinen Fehler gefunden hat.

Standard

Wir prüfen nach den Web Content Accessibility Guidelines (WCAG) 2.2, Konformitätsstufe AA: 55 Erfolgskriterien der Stufen A und AA. Das Kriterium 4.1.1 (Syntaxanalyse) ist in WCAG 2.2 entfallen und wird nicht geprüft.

Die europäische Norm EN 301 549 (Version 3.2.1) verweist für Websites auf WCAG 2.1 AA. WCAG 2.2 AA umfasst diese Kriterien und sechs weitere; sie sind unten markiert.

Seitenauswahl

Wir folgen der Bewertungsmethode des W3C (WCAG-EM): Startseite, eine Seite pro Vorlage, die Seiten für Kontakt, Formulare und Rechtliches und die Nutzerwege, die für Ihr Angebot zählen, etwa Bestellung oder Terminbuchung. Die geprüften Adressen stehen im Bericht und auf dem Zertifikat.

Automatische Tests

  • axe-core auf jeder Seite (Regeln für WCAG 2.0 bis 2.2, A und AA)
  • Tastatur-Durchlauf: Reihenfolge, sichtbarer Fokus, verdeckter Fokus, Tastaturfallen
  • Umbruch bei 320 CSS-Pixel Breite und 200 % Zoom, mit Screenshots
  • Textabstände nach WCAG 1.4.12: wird etwas abgeschnitten?
  • Formulare: Beschriftungen, Autocomplete, Fehlermeldungen des Browsers, ohne Absenden
  • Medien und Bewegung: Videos, Audio, Autoplay, Karussells, Animationen
  • Hoch- und Querformat, Sprache, Seitentitel, Linktexte, Überschriften und Landmarks

Prüfung durch einen Menschen

Jedes Kriterium wird von einem Menschen entschieden: erfüllt, nicht erfüllt oder nicht anwendbar. Der Scanner bereitet dafür vor, was er findet, als Vorschlag mit Belegen. Ob ein Alternativtext passt, ob die Reihenfolge Sinn ergibt oder ob eine Fehlermeldung hilft, beurteilt nur ein Mensch. Kein Kriterium wird automatisch auf „erfüllt“ gesetzt.

Jede Entscheidung wird mit Begründung und Belegen im Bericht festgehalten, damit Sie sie nachvollziehen können.

Screenreader-Test

Zu jedem Audit gehört ein Durchgang mit Screenreader (NVDA unter Windows oder VoiceOver unter macOS und iOS) durch zwei bis drei zentrale Nutzerwege. Notiert wird alles, was nicht, falsch oder gar nicht erreichbar angesagt wird.

Wann es ein Zertifikat gibt

  • Alle 55 Kriterien sind von einem Menschen entschieden.
  • Kein Kriterium ist „nicht erfüllt“.
  • Der Screenreader-Test ist abgeschlossen.

Das Zertifikat nennt Umfang, Standard, Prüfdatum und Ablaufdatum und hat eine öffentliche Prüfseite. Es gilt zwölf Monate ab dem Prüfdatum. Es kann widerrufen werden, etwa wenn das Monitoring einen schweren Rückschritt findet, der nicht behoben wird.

Grenzen

Das Zertifikat ist eine Momentaufnahme: Es beschreibt die geprüfte Version zum Prüfdatum. Was danach geändert wird, deckt es nicht ab, auch wenn es noch gilt. Laufend geprüft wird nur im Monitoring, mit Scans nach Plan und nach Änderungen an der Website. Das Zertifikat ist keine Rechtsberatung und keine Zusage, dass Sie alle gesetzlichen Pflichten erfüllen.

Echte Belege statt Behauptungen

So sehen die Screenshots aus, die unser Scanner zu jeder Seite liefert. Aufgenommen auf dieser Website.

Startseite dieser Website mit blau gestrichelten Rahmen um jedes fokussierbare Element und Nummern von 1 bis 17 in Tab-Reihenfolge, von der Werkzeugleiste über das Menü bis zu den Buttons im Kopfbereich.
Tab-Reihenfolge Jeder Fokus-Halt wird nummeriert. So sehen Sie, ob die Reihenfolge stimmt (2.4.3).
Dieselbe Startseite in 320 Pixel Breite: Überschrift, Text und Buttons stehen untereinander, nichts ist abgeschnitten.
Umbruch bei 320 px Die Seite in 320 Pixel Breite: nichts darf abgeschnitten werden (1.4.10).
Startseite mit vergrößerten Zeilen-, Wort- und Buchstabenabständen. Alle Texte bleiben vollständig lesbar.
Textabstände Größere Zeilen-, Wort- und Buchstabenabstände dürfen nichts überdecken (1.4.12).

Echte Ausgabe unseres Scanners, aufgenommen auf barrierefreiheitszertifikat.de.

Alle 55 Kriterien

Für jedes Kriterium: was der Scanner beiträgt und welche Frage der Mensch beantwortet.

axe-core: automatische Regeln finden Verstöße. Belege: der Scanner sammelt Screenshots, Listen und Messungen. Nur Mensch: hier lässt sich nichts sinnvoll messen.

Vier Prinzipien, 55 Kriterien

  • 1. Wahrnehmbar 20 Kriterien
  • 2. Bedienbar 20 Kriterien
  • 3. Verständlich 13 Kriterien
  • 4. Robust 2 Kriterien

1. Wahrnehmbar

  • 1.1.1 A

    Nicht-Text-Inhalt

    axe-core Belege

    Hat jedes Bild einen Alternativtext, der sagt, was das Bild hier bedeutet? Dekorative Bilder brauchen alt="".

  • 1.2.1 A

    Nur Audio und nur Video (aufgezeichnet)

    Belege

    Aufgezeichnetes Audio braucht ein Transkript, stummes Video eine Text- oder Audio-Alternative.

  • 1.2.2 A

    Untertitel (aufgezeichnet)

    axe-core Belege

    Haben Videos mit Ton korrekte, synchrone Untertitel?

  • 1.2.3 A

    Audiodeskription oder Medienalternative (aufgezeichnet)

    Belege

    Sind visuelle Informationen in Videos als Audiodeskription oder vollständige Textalternative verfügbar?

  • 1.2.4 AA

    Untertitel (live)

    Belege

    Live-Audioinhalte (Streams) brauchen Live-Untertitel.

  • 1.2.5 AA

    Audiodeskription (aufgezeichnet)

    Belege

    Haben aufgezeichnete Videos eine Audiodeskription, wo das Bild Informationen trägt?

  • 1.3.1 A

    Info und Beziehungen

    axe-core Belege

    Sind Überschriften, Listen, Tabellen, Formulargruppen und Landmarks als solche ausgezeichnet (nicht nur gestaltet)?

  • 1.3.2 A

    Bedeutungstragende Reihenfolge

    Belege

    Ergibt die Lesereihenfolge (DOM-Reihenfolge, siehe Liste) ohne Layout Sinn?

  • 1.3.3 A

    Sensorische Eigenschaften

    nur Mensch

    Verlassen sich Anweisungen nur auf Form, Farbe, Größe, Position oder Ton („klicken Sie rechts auf den runden Knopf“)?

  • 1.3.4 AA

    Bildschirmausrichtung

    Belege

    Funktioniert der Inhalt im Hoch- und Querformat?

  • 1.3.5 AA

    Eingabezweck bestimmen

    axe-core Belege

    Haben Felder für persönliche Daten (Name, E-Mail, Telefon, Adresse) den passenden autocomplete-Wert?

  • 1.4.1 A

    Benutzung von Farbe

    axe-core

    Ist Farbe irgendwo das einzige Mittel, um Information zu zeigen (Links im Text, Pflichtfelder, Fehler, Diagramme)?

  • 1.4.2 A

    Audio-Steuerelement

    axe-core Belege

    Automatisch abgespieltes Audio über 3 Sekunden braucht Pause/Stopp oder Lautstärkeregelung.

  • 1.4.3 AA

    Kontrast (Minimum)

    axe-core

    Textkontrast mindestens 4,5:1 (große Schrift 3:1). Auch Text auf Bildern und Hover-/Fokus-Zustände prüfen.

  • 1.4.4 AA

    Textgröße ändern

    axe-core Belege

    Ist bei 200 % Zoom aller Inhalt und jede Funktion ohne Verlust vorhanden (siehe Screenshot)?

  • 1.4.5 AA

    Bilder eines Textes

    Belege

    Wird Text als Bild gezeigt, wo echter Text möglich wäre (Logos ausgenommen)?

  • 1.4.10 AA

    Umbruch (Reflow)

    Belege

    Bei 320 CSS-Pixel Breite: kein horizontales Scrollen, nichts abgeschnitten (siehe Screenshot und Messung).

  • 1.4.11 AA

    Nicht-Text-Kontrast

    Belege

    Rahmen von Eingabefeldern, Icons, Fokusanzeigen und Diagrammteile mindestens 3:1 zum Hintergrund.

  • 1.4.12 AA

    Textabstand

    Belege

    Wird mit vergrößertem Zeilen-, Absatz-, Buchstaben- und Wortabstand Text abgeschnitten oder überlappt?

  • 1.4.13 AA

    Eingeblendete Inhalte bei Hover oder Fokus

    nur Mensch

    Tooltips und Menüs bei Hover/Fokus: per Esc schließbar, mit der Maus erreichbar, bleiben bis zum Schließen.

2. Bedienbar

  • 2.1.1 A

    Tastatur

    axe-core Belege

    Ist jede Funktion allein mit der Tastatur erreichbar und bedienbar (Menüs, Slider, Dialoge, Formulare)?

  • 2.1.2 A

    Keine Tastaturfalle

    Belege

    Kann der Fokus jede Komponente per Tastatur wieder verlassen (eingebettete Player und Dialoge beachten)?

  • 2.1.4 A

    Tastaturkurzbefehle

    nur Mensch

    Kurzbefehle mit einzelnen Zeichen müssen abschaltbar, änderbar oder nur bei Fokus aktiv sein.

  • 2.2.1 A

    Zeitbegrenzung anpassbar

    axe-core

    Zeitlimits (Session-Timeouts, automatische Weiterleitungen) lassen sich abschalten, anpassen oder verlängern.

  • 2.2.2 A

    Pausieren, beenden, ausblenden

    axe-core Belege

    Bewegte, blinkende oder sich aktualisierende Inhalte (Karussells, Ticker, Animationen) lassen sich pausieren oder stoppen.

  • 2.3.1 A

    Grenzwert von dreimaligem Blitzen oder weniger

    nur Mensch

    Nichts blitzt öfter als dreimal pro Sekunde.

  • 2.4.1 A

    Blöcke umgehen

    axe-core Belege

    Gibt es einen Skip-Link oder Landmarks/Überschriften, um wiederholte Navigation zu überspringen?

  • 2.4.2 A

    Seite mit Titel

    axe-core Belege

    Beschreibt jeder Seitentitel das Thema und unterscheiden sich die Titel (siehe Liste)?

  • 2.4.3 A

    Fokus-Reihenfolge

    Belege

    Folgt die Tab-Reihenfolge (nummerierter Screenshot) einer logischen Abfolge?

  • 2.4.4 A

    Linkzweck (im Kontext)

    axe-core Belege

    Ist der Zweck jedes Links aus Text oder Kontext klar? Markierte generische Linktexte prüfen.

  • 2.4.5 AA

    Verschiedene Methoden

    Belege

    Gibt es mehr als einen Weg, Seiten zu finden (Navigation plus Suche, Sitemap oder Index)?

  • 2.4.6 AA

    Überschriften und Beschriftungen

    Belege

    Beschreiben Überschriften und Beschriftungen Thema oder Zweck?

  • 2.4.7 AA

    Fokus sichtbar

    Belege

    Ist der Tastaturfokus immer deutlich sichtbar? Elemente ohne erkannten Fokusstil sind markiert.

  • 2.4.11 AA

    Fokus nicht verdeckt (Minimum)

    Belege neu in 2.2

    Wird ein fokussiertes Element je ganz verdeckt (z. B. durch Sticky Header oder Cookie-Banner)? Markierte Fälle gelistet.

  • 2.5.1 A

    Zeigergesten

    nur Mensch

    Mehrpunkt- oder Pfadgesten (Pinch, Wischen) haben eine Alternative mit einfachem Zeiger.

  • 2.5.2 A

    Zeigeraktion abbrechen

    nur Mensch

    Aktionen lösen beim Loslassen aus, nicht beim Drücken, oder lassen sich abbrechen.

  • 2.5.3 A

    Beschriftung im Namen

    axe-core

    Der zugängliche Name enthält den sichtbaren Beschriftungstext (wichtig für Sprachsteuerung).

  • 2.5.4 A

    Betätigung durch Bewegung

    nur Mensch

    Funktionen per Schütteln oder Neigen haben eine Bedienalternative und lassen sich abschalten.

  • 2.5.7 AA

    Ziehbewegungen

    Belege neu in 2.2

    Alles, was per Ziehen geht (Slider, sortierbare Listen, Karten), geht auch mit einfachen Klicks.

  • 2.5.8 AA

    Zielgröße (Minimum)

    axe-core neu in 2.2

    Klickziele mindestens 24×24 CSS-Pixel oder mit genug Abstand.

3. Verständlich

  • 3.1.1 A

    Sprache der Seite

    axe-core Belege

    Ist die Seitensprache in <html lang> richtig gesetzt?

  • 3.1.2 AA

    Sprache von Teilen

    axe-core

    Sind anderssprachige Passagen mit lang ausgezeichnet (z. B. englische Zitate auf einer deutschen Seite)?

  • 3.2.1 A

    Bei Fokus

    nur Mensch

    Fokus allein löst keinen Kontextwechsel aus (kein Auto-Absenden, kein neues Fenster bei Fokus).

  • 3.2.2 A

    Bei Eingabe

    nur Mensch

    Das Ändern einer Einstellung (Auswahl, Checkbox) wechselt den Kontext nicht ohne vorherigen Hinweis.

  • 3.2.3 AA

    Konsistente Navigation

    Belege

    Steht wiederholte Navigation auf jeder Seite in derselben Reihenfolge? Gefundene Unterschiede sind gelistet.

  • 3.2.4 AA

    Konsistente Erkennung

    nur Mensch

    Komponenten mit gleicher Funktion sind seitenübergreifend gleich beschriftet.

  • 3.2.6 A

    Konsistente Hilfe

    Belege neu in 2.2

    Hilfe (Kontakt, Telefon, Chat, FAQ) steht auf jeder Seite, auf der es sie gibt, an derselben relativen Stelle.

  • 3.3.1 A

    Fehlererkennung

    Belege

    Eingabefehler werden erkannt und als Text beschrieben (Validierungsmeldungen ohne Absenden erfasst).

  • 3.3.2 A

    Beschriftungen oder Anweisungen

    axe-core Belege

    Jedes Eingabefeld hat eine sichtbare Beschriftung oder Anweisung, inkl. Pflichtfeld- und Formathinweisen.

  • 3.3.3 AA

    Fehlerempfehlung

    Belege

    Wo eine Korrektur bekannt ist, schlägt die Fehlermeldung sie vor (z. B. „Bitte Datum als TT.MM.JJJJ eingeben“).

  • 3.3.4 AA

    Fehlervermeidung (rechtlich, finanziell, Daten)

    Belege

    Bestellungen, Verträge und Datenänderungen lassen sich vor dem Absenden prüfen, korrigieren oder rückgängig machen.

  • 3.3.7 A

    Redundante Eingabe

    nur Mensch neu in 2.2

    Bereits im selben Prozess eingegebene Daten werden vorausgefüllt oder sind auswählbar, nicht doppelt abgefragt.

  • 3.3.8 AA

    Barrierefreie Authentifizierung (Minimum)

    Belege neu in 2.2

    Login funktioniert ohne kognitiven Test (kein Rätsel-CAPTCHA, Einfügen erlaubt, Passwortmanager funktionieren).

4. Robust

  • 4.1.2 A

    Name, Rolle, Wert

    axe-core

    Eigene Bedienelemente (Menüs, Tabs, Akkordeons, Schalter) geben Name, Rolle und Zustand an Hilfsmittel weiter. Mit Screenreader prüfen.

  • 4.1.3 AA

    Statusmeldungen

    nur Mensch

    Statusmeldungen (in den Warenkorb gelegt, Formular gesendet, Suchergebnisse) werden vom Screenreader ohne Fokuswechsel angesagt.