Selbsttest und Mini-Prüfung
Zwei schnelle Werkzeuge, um häufige Probleme zu finden. Keines davon misst Konformität.
Selbsttest in 20 Punkten
Auf Ihren wichtigsten Seiten durchführen (Startseite, Produktseite, Warenkorb, Bestellung).
Checkliste herunterladen (Word)
| # | Prüfpunkt | So testen | WCAG 2.1 | RGAA 4.1 |
|---|---|---|---|---|
| 1 | Alles ist per Tastatur bedienbar | Maus weglegen. Mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten durch Menü, Suche, Produktseite, Warenkorb und Bezahlung gehen. Man darf nirgends hängen bleiben. | 2.1.1, 2.1.2 | 4.11, 4.12, 7.3, 10.14, 12.9, 12.11 |
| 2 | Der Fokus ist sichtbar | Beim Tabben sieht man immer, wo man ist (Rahmen, Unterstreichung …), auch bei Buttons und Feldern. | 2.4.7 | 7.3, 10.7 |
| 3 | Die Tab-Reihenfolge ist logisch | Der Fokus folgt der Lesereihenfolge und springt nicht zufällig; ein modaler Dialog hält den Fokus und gibt ihn beim Schließen zurück. | 2.4.3 | 10.3, 12.7, 12.8, 13.3, 13.4 |
| 4 | Es gibt einen Sprunglink | Beim ersten Tab erscheint ein Link „Zum Inhalt springen“, und er funktioniert. | 2.4.1 | 9.1, 12.6, 12.7, 13.3, 13.4 |
| 5 | Informative Bilder haben einen Alternativtext | Produktfotos, Logos und Icon-Buttons haben einen passenden Alternativtext; dekorative Bilder haben alt="" (mit dem Mini-Test unten prüfbar). | 1.1.1 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 4.7, 4.8, 4.9, 6.1, 6.2, 7.2, 10.2, 13.3, 13.4, 13.5, 13.6 |
| 6 | Die Kontraste reichen aus | Text: mindestens 4,5:1 (3:1 für großen Text). Feldränder und wichtige Icons: mindestens 3:1. Preise, Buttons, graue Hinweise und Banner prüfen. | 1.4.3, 1.4.11 | 3.2, 3.3, 10.5 |
| 7 | Farbe ist nicht das einzige Merkmal | Fehler, Links im Fließtext, nicht verfügbare Größen oder Schritte werden nicht nur durch Farbe gekennzeichnet. | 1.4.1 | 3.1, 10.6, 10.7, 10.9, 10.10 |
| 8 | Zoom auf 200 % und 320 px Breite | Auf 200 % zoomen und das Fenster auf 320 px verkleinern: alles bleibt lesbar und bedienbar, ohne horizontales Scrollen. | 1.4.4, 1.4.10 | 10.4, 10.11 |
| 9 | Überschriften gliedern die Seite | Jede Seite hat eine Hauptüberschrift (h1) und gegliederte Zwischenüberschriften, die die Abschnitte beschreiben. | 1.3.1, 2.4.6 | 3.1, 5.1, 5.2, 5.4, 5.5, 5.6, 5.7, 5.8, 7.3, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 11.1, 11.2, 11.5, 11.6, 11.7, 11.8, 12.6, 13.3, 13.4 |
| 10 | Jede Seite hat einen eigenen Titel | Der Browser-Tab zeigt einen Titel, der die Seite unterscheidet (z. B. „Warenkorb – Mein Shop“). | 2.4.2 | 8.5, 8.6 |
| 11 | Die Sprache ist angegeben | Das html-Element hat das richtige lang-Attribut (z. B. lang="de"). | 3.1.1 | 8.3, 8.4, 13.3, 13.4 |
| 12 | Links sind aussagekräftig | Kein alleinstehendes „hier klicken“ oder „mehr“: Linktext oder Kontext sagen, wohin der Link führt. | 2.4.4 | 6.1, 6.2 |
| 13 | Jedes Feld hat eine Beschriftung | Felder (Suche, Adresse, Karte, Newsletter) haben eine sichtbare, verknüpfte Beschriftung, nicht nur einen Platzhaltertext. | 1.3.1, 3.3.2, 4.1.2 | 1.2, 1.3, 1.9, 2.1, 2.2, 3.1, 4.13, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8, 7.1, 7.2, 7.3, 8.2, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 10.8, 11.1, 11.2, 11.4, 11.5, 11.6, 11.7, 11.8, 11.9, 11.10, 12.6, 13.3, 13.4 |
| 14 | Fehler werden erklärt | Ein leeres Formular absenden: Der Fehler wird als Text am Feld beschrieben, mit einem Korrekturvorschlag. | 3.3.1, 3.3.3 | 11.10, 11.11 |
| 15 | Statusmeldungen werden angesagt | „In den Warenkorb gelegt“, „3 Treffer“: Mit Screenreader (NVDA, VoiceOver) wird die Meldung vorgelesen, ohne dass der Fokus springt. | 4.1.3 | 7.5 |
| 16 | Videos haben Untertitel | Videos mit Sprache haben synchrone Untertitel; wichtige visuelle Informationen werden beschrieben. | 1.2.2, 1.2.5 | 4.3, 4.4, 4.5, 4.6 |
| 17 | Animationen lassen sich stoppen | Karussells und Laufbänder haben einen Pause-Button und bewegen sich nicht länger als 5 Sekunden ohne Steuerung. | 2.2.2 | 13.1, 13.8 |
| 18 | Keine blockierenden Zeitlimits | Läuft eine Sitzung oder ein Warenkorb ab, wird man gewarnt und kann die Zeit verlängern. | 2.2.1 | 13.1, 13.8 |
| 19 | Login, CAPTCHA und Bezahlung barrierefrei | Ein CAPTCHA hat eine Alternative (Audio o. Ä.); Registrierung, Login und Bezahlung (inkl. 3-D Secure) funktionieren per Tastatur und Screenreader. | 1.1.1, 3.3.2 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 4.7, 4.8, 4.9, 6.1, 6.2, 7.2, 10.2, 11.1, 11.2, 11.4, 11.5, 11.6, 11.7, 11.10, 13.3, 13.4, 13.5, 13.6 |
| 20 | Downloads sind barrierefrei | AGB, Rechnungen, Anleitungen als PDF: markierbarer Text, getaggte Überschriften oder eine gleichwertige HTML-Version. | 1.1.1, 1.3.1 | 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.9, 3.1, 4.7, 4.8, 4.9, 5.1, 5.2, 5.4, 5.5, 5.6, 5.7, 5.8, 6.1, 6.2, 7.2, 7.3, 8.9, 9.1, 9.2, 9.3, 9.4, 10.1, 10.2, 11.1, 11.5, 11.6, 11.7, 11.8, 12.6, 13.3, 13.4, 13.5, 13.6 |
Automatische Mini-Prüfung eines HTML-Auszugs
Fügen Sie den HTML-Code einer Seite oder Komponente ein (Rechtsklick › „Seitenquelltext anzeigen“ oder Entwicklertools). Die Prüfung läuft in Ihrem Browser mit axe-core 4.13; der Code wird nirgendwohin gesendet.
Skripte im eingefügten Code werden entfernt, externe Ressourcen (Bilder, CSS, Schriften) werden nicht geladen. Für Kontrastprüfungen das CSS in einem <style>-Element mit einfügen.