Welche Seiten Sie zuerst prüfen
Sie müssen nicht jede Seite einzeln testen. Shops und Websites bestehen aus wenigen Vorlagen – ein Fehler in der Produktseiten-Vorlage steckt in jedem Produkt. Prüfen Sie je eine Seite pro Vorlage:
- ✓Startseite
- ✓Kategorie- oder Übersichtsseite
- ✓Produkt- oder Detailseite
- ✓Warenkorb und Checkout bis zur Bestellübersicht
- ✓Kontaktformular, Login und Registrierung
- ✓Cookie-Banner und Pop-ups
Schritt 1: Automatisch testen
Drei kostenlose Werkzeuge reichen für den Anfang: Lighthouse ist in Chrome eingebaut (Entwicklertools, Reiter „Lighthouse“), WAVE von WebAIM und axe DevTools von Deque gibt es als Browser-Erweiterung.
Sie finden zuverlässig fehlende Alternativtexte, zu schwache Kontraste, Formularfelder ohne Label, leere Links und eine fehlende Sprachangabe. Was sie nicht beurteilen können: ob ein Alternativtext sinnvoll ist, ob die Reihenfolge logisch ist und ob sich der Checkout per Tastatur bedienen lässt.
Ein grüner Lighthouse-Wert heißt nicht „barrierefrei“. Er heißt nur, dass die automatisch prüfbaren Punkte stimmen.
Schritt 2: Nur mit der Tastatur
Legen Sie die Maus weg und gehen Sie mit Tab, Umschalt+Tab, Enter und den Pfeiltasten durch die Seite. Prüfen Sie dabei:
- ✓Ist immer sichtbar, wo der Fokus gerade steht? (WCAG 2.4.7)
- ✓Erreichen Sie Menü, Filter, Variantenauswahl und Mengenfeld? (2.1.1)
- ✓Kommen Sie aus jedem Element wieder heraus – auch aus Cookie-Banner und Pop-ups? (2.1.2)
- ✓Ist die Reihenfolge logisch, oder springt der Fokus quer über die Seite? (2.4.3)
- ✓Lässt sich der Checkout bis zur Bestellung abschließen?
Schritt 3: Mit dem Screenreader
Unter Windows ist NVDA kostenlos, auf Mac und iPhone ist VoiceOver eingebaut (am Mac mit Cmd+F5). Lassen Sie sich die Seite vorlesen und achten Sie darauf:
- ✓Hat die Seite einen eindeutigen Titel? (2.4.2)
- ✓Bilden die Überschriften eine sinnvolle Gliederung? (1.3.1)
- ✓Werden Produktbilder beschrieben – oder nur Dateinamen vorgelesen? (1.1.1)
- ✓Haben Buttons einen Namen, auch Icon-Buttons wie Warenkorb oder Suche? (4.1.2)
- ✓Werden Fehlermeldungen in Formularen vorgelesen? (3.3.1)
Schritt 4: Vergrößern und Kontraste
Zoomen Sie im Browser auf 200 %: Text muss lesbar bleiben, nichts darf abgeschnitten werden (1.4.4). Bei einer Breite von 320 Pixeln darf nichts quer gescrollt werden müssen (1.4.10) – das entspricht 400 % Zoom bei einem 1.280 Pixel breiten Fenster.
Für Kontraste gilt: normaler Text mindestens 4,5 : 1, großer Text 3 : 1 (1.4.3). Buttons, Eingabefelder und Icons brauchen 3 : 1 gegenüber dem Hintergrund (1.4.11). Messen lässt sich das mit dem kostenlosen Colour Contrast Analyser von TPGi.
Schritt 5: Festhalten und priorisieren
Schreiben Sie jeden Fund mit Seite und Kriterium auf. Beheben Sie zuerst, was einen Kauf oder eine Anfrage verhindert:
| Fehler | Folge | Priorität |
|---|---|---|
| Checkout per Tastatur nicht bedienbar | Kauf unmöglich | Sofort |
| Formularfelder ohne Label | Unklar, was einzugeben ist | Hoch |
| Produktbilder ohne Alternativtext | Produkt nicht erkennbar | Hoch |
| Zu schwacher Kontrast | Schwer lesbar | Mittel |
| Überschriften ohne Struktur | Orientierung fehlt | Mittel |
Welche Punkte zu einer barrierefreien Seite gehören, fasst unsere Checkliste zusammen. Ob das Gesetz für Sie gilt, steht im Ratgeber BFSG-Pflichten. Lieber prüfen lassen? Der Barrierefreiheits-Check ist kostenlos.