Die Barrierefreiheit Ihrer Website können Sie in einer halben Stunde selbst testen, zumindest auf grobe Barrieren. Sie brauchen dafür nur Ihre Tastatur, die Zoomfunktion Ihres Browsers und zwei kostenlose Werkzeuge. Die Checkliste mit zehn Prüfungen deckt die Fehler ab, die wir bei Prüfungen nach WCAG 2.2 am häufigsten finden. Eine vollständige Prüfung ersetzt sie nicht, aber Sie wissen danach, wo Sie stehen.
Vorbereitung
Wählen Sie drei bis fünf typische Seiten aus: die Startseite, eine Inhaltsseite, eine Seite mit Formular (Kontakt, Anmeldung oder Kasse) und, falls vorhanden, eine Produkt- oder Buchungsseite. Notieren Sie zu jeder Prüfung, auf welcher Seite Sie welches Problem gefunden haben. Diese Liste ist später eine gute Grundlage für Ihre Entwicklerinnen und Entwickler.
1. Ist alles mit der Tastatur bedienbar?
Legen Sie die Maus beiseite. Drücken Sie wiederholt die Tab-Taste, um von Element zu Element zu springen, und Umschalt + Tab, um zurückzugehen. Links öffnen Sie mit Enter, Schaltflächen und Kontrollkästchen mit der Leertaste.
- Erreichen Sie jeden Link, jedes Menü, jedes Formularfeld und jede Schaltfläche?
- Lassen sich Untermenüs, Akkordeons und Dialoge öffnen und wieder schließen, etwa mit Esc?
- Bleiben Sie nirgends hängen, zum Beispiel in einem eingebetteten Video oder einer Karte?
- Folgt die Reihenfolge dem, was Sie auf dem Bildschirm sehen?
Ein häufiger Stolperstein ist der Cookie-Banner: Lässt er sich nicht per Tastatur bestätigen oder ablehnen, ist die gesamte Website für Tastaturnutzende gesperrt.
2. Sehen Sie immer, wo Sie gerade sind?
Während Sie mit Tab durch die Seite gehen, muss das aktive Element deutlich hervorgehoben sein, meist durch einen Rahmen. Viele Websites schalten diesen Fokusrahmen aus gestalterischen Gründen ab. Achten Sie außerdem darauf, ob eine fest stehende Kopfzeile oder ein Banner das fokussierte Element vollständig verdeckt. Seit WCAG 2.2 ist das ausdrücklich ein Fehler (Kriterium 2.4.11).
3. Funktioniert die Seite vergrößert?
Vergrößern Sie die Ansicht mit Strg + + (auf dem Mac Cmd + +) zuerst auf 200 % und dann auf 400 %. Bei einem Browserfenster von 1280 Pixeln Breite entsprechen 400 % etwa der Breite eines kleinen Smartphones.
- Ist noch der gesamte Text lesbar, ohne dass er abgeschnitten wird oder sich überlappt?
- Können Sie bei 400 % lesen, ohne seitlich scrollen zu müssen?
- Bleibt die Navigation erreichbar, zum Beispiel als Menüschaltfläche?
- Nehmen Kopfzeile, Cookie-Banner oder Chat-Fenster nicht den halben Bildschirm ein?
4. Sind Texte kontrastreich genug?
Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5 : 1 zum Hintergrund, große Schrift und Bedienelemente wie Rahmen von Eingabefeldern mindestens 3 : 1. Prüfen Sie vor allem hellgraue Texte, Text auf Fotos, Platzhaltertexte in Formularfeldern und Schaltflächen in Markenfarben. Wie Sie Kontraste messen, beschreiben wir in unserer Anleitung zum Farbkontrast.
5. Haben Bilder sinnvolle Alternativtexte?
Alternativtexte beschreiben Bilder für Menschen, die sie nicht sehen. Mit dem kostenlosen Werkzeug WAVE (siehe Prüfung 10) sehen Sie zu jedem Bild den hinterlegten Text. Fehlt er bei einem Bild mit Information, ist das ein Fehler. Ebenso problematisch sind Alternativtexte wie „IMG_4711.jpg“, „Bild“ oder eine Aneinanderreihung von Suchbegriffen. Ein Logo, das zur Startseite führt, sollte zum Beispiel „Startseite Firmenname“ heißen. Mehr dazu in unserem Artikel Alternativtexte richtig schreiben.
6. Ergeben die Überschriften eine Gliederung?
Screenreader-Nutzende springen über Überschriften durch eine Seite, ähnlich wie Sehende sie überfliegen. Jede Seite sollte genau eine Hauptüberschrift (H1) haben, darunter folgen H2, H3 und so weiter, ohne Ebenen zu überspringen. WAVE zeigt die Gliederung im Reiter „Structure“, die Browser-Erweiterung HeadingsMap als übersichtliche Liste. Häufige Fehler: Text, der nur fett und groß formatiert ist, statt als Überschrift ausgezeichnet zu sein, oder Überschriften, die nur wegen ihrer Schriftgröße gewählt wurden.
7. Verraten Links, wohin sie führen?
Linktexte wie „hier“, „mehr“ oder „weiterlesen“ sind ohne den umgebenden Satz unverständlich. Screenreader können alle Links einer Seite als Liste vorlesen, und dann stehen dort zehnmal „mehr erfahren“. Besser ist ein Linktext, der das Ziel nennt, etwa „Mehr zu unseren Prüfleistungen“. Prüfen Sie auch Symbole ohne Text, zum Beispiel Social-Media-Links oder ein Lupen-Symbol für die Suche.
8. Sind Formulare verständlich beschriftet?
- Hat jedes Feld eine sichtbare Beschriftung, die auch nach dem Ausfüllen stehen bleibt? Ein Platzhaltertext im Feld reicht nicht.
- Klicken Sie auf die Beschriftung: Springt der Cursor in das zugehörige Feld? Dann ist die Beschriftung technisch korrekt verknüpft.
- Schicken Sie das Formular leer oder mit einer falschen E-Mail-Adresse ab: Sagt die Fehlermeldung in Worten, welches Feld betroffen ist und was zu tun ist? Eine rote Umrandung allein genügt nicht.
- Sind Pflichtfelder als solche gekennzeichnet, nicht nur durch Farbe?
Warum sich das auch wirtschaftlich lohnt, zeigt unser Artikel Mehr Anfragen und Registrierungen dank barrierefreier Formulare.
9. Lassen sich Videos und Bewegung kontrollieren?
Videos mit Sprache brauchen Untertitel. Inhalte, die sich von selbst bewegen, etwa Slider, Lauftexte oder Hintergrundvideos, müssen sich anhalten lassen, wenn sie länger als fünf Sekunden laufen. Audio, das automatisch startet, muss sich stoppen oder leiser stellen lassen. Prüfen Sie auch, ob die Pause-Schaltfläche mit der Tastatur erreichbar ist.
10. Was finden automatische Werkzeuge?
Zum Schluss lassen Sie Ihre Seiten von einem Prüfwerkzeug durchsuchen. Bewährt haben sich:
- WAVE von WebAIM: Adresse eingeben oder als Browser-Erweiterung nutzen. Zeigt Fehler, Kontrastprobleme, Alternativtexte und die Überschriftenstruktur direkt auf der Seite an.
- Lighthouse: in Chrome und Edge bereits eingebaut. Rechtsklick auf die Seite, „Untersuchen“, Reiter „Lighthouse“, Kategorie „Barrierefreiheit“ auswählen.
Automatische Werkzeuge finden nur Fehler, die sich maschinell feststellen lassen: ein fehlender Alternativtext ja, ein nichtssagender nein. Eine Lighthouse-Bewertung von 100 Punkten bedeutet deshalb nicht, dass eine Website barrierefrei ist. Die Prüfungen 1 bis 9 sind darum mindestens genauso wichtig.
Checkliste: alle Prüfungen auf einen Blick
Die Tabelle eignet sich als kurze Checkliste für Ihre Website. Eine ausführlichere Übersicht, quasi eine BITV-2.0-Checkliste mit den wichtigsten WCAG-Kriterien, finden Sie auf unserer Seite BITV 2.0 Anforderungen.
| Prüfung | So geht’s | WCAG-Kriterium |
|---|---|---|
| Tastaturbedienung | Mit Tab, Enter, Leertaste, Esc durch die Seite | 2.1.1, 2.1.2, 2.4.3 |
| Sichtbarer Fokus | Beim Tabben auf Hervorhebung achten | 2.4.7, 2.4.11 |
| Vergrößerung | Browser-Zoom auf 200 % und 400 % | 1.4.4, 1.4.10 |
| Kontrast | Kontrastprüfer oder WAVE | 1.4.3, 1.4.11 |
| Alternativtexte | WAVE, Reiter „Details“ | 1.1.1 |
| Überschriften | WAVE „Structure“ oder HeadingsMap | 1.3.1, 2.4.6 |
| Linktexte | Links ohne Umgebung lesen | 2.4.4 |
| Formulare | Beschriftung anklicken, falsch absenden | 1.3.1, 3.3.1, 3.3.2 |
| Medien und Bewegung | Untertitel, Pause-Schaltflächen | 1.2.2, 1.4.2, 2.2.2 |
| Automatische Prüfung | WAVE, Lighthouse | verschiedene |
Was der Selbsttest nicht abdeckt
Für Konformitätsstufe AA sind in den WCAG 2.2 insgesamt 55 Erfolgskriterien zu erfüllen (Stufe A und AA). Einige davon lassen sich nur mit Fachwissen und Hilfsmitteln prüfen, etwa ob ein Screenreader Namen, Rolle und Zustand eines Bedienelements richtig ansagt, ob Statusmeldungen vorgelesen werden oder ob Inhalte bei geänderten Textabständen lesbar bleiben. Wenn Sie wissen müssen, ob Ihre Website das Barrierefreiheitsstärkungsgesetz erfüllt, oder eine belastbare Grundlage für Ihre Erklärung zur Barrierefreiheit brauchen, ist eine vollständige Prüfung der sichere Weg. Wie wir dabei vorgehen, lesen Sie in So läuft ein Barrierefreiheits-Test bei uns ab.
Häufige Fragen zum Selbsttest
Kann ich die Barrierefreiheit meiner Website kostenlos testen?
Ja. Für die zehn Prüfungen in diesem Artikel brauchen Sie nur Ihren Browser und kostenlose Werkzeuge wie WAVE und Lighthouse. Damit finden Sie die häufigsten Barrieren. Eine vollständige Prüfung aller WCAG-Kriterien braucht zusätzlich Erfahrung mit Screenreadern und anderen Hilfsmitteln. Eine erste automatische Prüfung einer Seite bietet auch unser kostenloser Barrierefreiheits-Check.
Reicht ein guter Lighthouse-Wert für das BFSG?
Nein. Lighthouse prüft nur einen kleinen Teil der Anforderungen automatisch. Ob Alternativtexte sinnvoll sind, ob die Tastaturbedienung funktioniert oder ob Fehlermeldungen verständlich sind, erkennt das Werkzeug nicht. Ein hoher Wert ist ein gutes Zeichen, aber kein Nachweis.
Muss ich zum Testen einen Screenreader installieren?
Für diesen Selbsttest nicht. Wenn Sie einen Eindruck bekommen möchten, können Sie es trotzdem ausprobieren: Auf dem Mac und dem iPhone ist VoiceOver eingebaut, unter Windows ist der Screenreader NVDA kostenlos. Rechnen Sie mit etwas Einarbeitung, denn geübte Nutzerinnen und Nutzer bedienen Screenreader ganz anders als Einsteiger.
Wie oft sollte ich den Test wiederholen?
Immer dann, wenn sich an der Website etwas Grundlegendes ändert: neues Design, neues Plugin, neuer Cookie-Banner oder ein neues Formular. Darüber hinaus empfehlen wir, die wichtigsten Seiten einmal im Quartal kurz durchzugehen, denn auch neue Inhalte der Redaktion können Barrieren mitbringen.
Quellen
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2 (englisch)
- W3C Web Accessibility Initiative: Easy Checks – A First Review of Web Accessibility (englisch)
- WebAIM: WAVE Web Accessibility Evaluation Tools (englisch)
Sie haben Barrieren gefunden? Wir prüfen Ihre Website vollständig und beheben die Barrieren direkt im Code. Sprechen Sie uns an.
Kostenlos starten
Erst automatisch, dann gezielt
Der kostenlose Barrierefreiheits-Check prüft eine Seite Ihrer Website automatisch mit Google Lighthouse und zeigt das Ergebnis sofort. Zusammen mit dieser Checkliste wissen Sie, wo Sie stehen. Für alles Weitere ist das Erstgespräch mit uns kostenlos.