Screen-Reader-Test: Website in 15 Minuten selbst prüfen

Sie können die Barrierefreiheit Ihrer Website in 15 Minuten selbst testen — mit kostenlosen Tools, die bereits auf Ihrem Computer installiert sind. Diese Anleitung zeigt Schritt für Schritt, wie Sie einen Screen-Reader-Test durchführen.

Welchen Screen Reader verwenden?

Für diesen Leitfaden verwenden wir VoiceOver (macOS) und NVDA (Windows) — die beiden meistgenutzten Screen Reader in Deutschland.

Vorbereitung (2 Minuten)

1. Öffnen Sie Ihre Website in Chrome oder Firefox
2. Aktivieren Sie den Screen Reader (siehe Tabelle oben)
3. Stellen Sie die Sprachausgabe auf Deutsch: VoiceOver: System-einstellungen → Bedienungshilfen → VoiceOver → Sprache. NVDA: Einstellungen → Sprache → Deutsch
4. Legen Sie die Maus beiseite — Sie testen nur mit der Tastatur

Test 1: Seitenstruktur (3 Minuten)

Lassen Sie sich die Überschriftenliste der Seite anzeigen:

• VoiceOver:VO + U (Rotor öffnen), dann zu „Überschriften" navigieren
• NVDA: H (nächste Überschrift) oder Insert + F7 (Elementliste)

Was Sie prüfen:

• Gibt es genau eine h1? (Sollte den Seitentitel enthalten)
• Folgen die Ebenen logisch? (h1 → h2 → h3, keine h4 nach h2)
• Beschreiben die Überschriften den Inhalt? (Nicht „Abschnitt 1", „Abschnitt 2")
• Sind alle wichtigen Abschnitte mit einer Überschrift eingeleitet?

Häufigster Fehler: Überschriften nur für Styling verwendet (z.B. h3 für fettgedruckten Text, obwohl es keine Unterabschnitte gibt). 67 % der geprüften KMU-Websites haben eine fehlerhafte Überschriftenhierarchie.

Test 2: Navigation (3 Minuten)

Drücken Sie Tab, um durch die interaktiven Elemente zu navigieren.

Was Sie prüfen:

• Skip-Link:Erscheint beim ersten Tab ein „Zum Hauptinhalt springen"-Link?
• Focus sichtbar: Sehen Sie bei jedem Tab-Schritt, wo der Focus ist?
• Logische Reihenfolge: Springt der Focus in der Lesereihenfolge oder zufällig?
• Keine Falle: Bleiben Sie irgendwo hängen, wo Tab nicht mehr weiterführt?
• Menü: Lassen sich Dropdown-Menüs mit Enter öffnen und mit Escape schließen?

Test 3: Bilder und Medien (3 Minuten)

Navigieren Sie mit dem Screen Reader durch die Bilder der Seite:

• VoiceOver: VO + Cmd + G (nächstes Bild)
• NVDA: G (nächste Grafik)

Was Sie prüfen:

• Wird jedes informative Bild beschrieben? (Nicht nur „Bild" oder der Dateiname)
• Sind dekorative Bilder stumm? (Kein „Banner-Grafik.jpg" vorgelesen)
• Haben verlinkte Bilder einen Link-Text? (Was passiert beim Klick?)

Typisches Problem:Stock-Fotos mit Alt-Text „shutterstock_123456.jpg" — vorgelesen als eine lange, bedeutungslose Zeichenkette.

Test 4: Formulare (3 Minuten)

Navigieren Sie zum Kontaktformular oder einem Anmeldeformular:

• VoiceOver: VO + Cmd + J (nächstes Formular-Element)
• NVDA: F (nächstes Formularfeld)

Was Sie prüfen:

• Wird bei jedem Feld der Feldname vorgelesen? („Name, Textfeld" statt nur „Textfeld")
• Sind Pflichtfelder als solche angekündigt? („Name, erforderlich, Textfeld")
• Werden Fehlermeldungen vorgelesen, wenn Sie ein Feld leer absenden?
• Ist die Fehlermeldung spezifisch? („Bitte geben Sie Ihren Namen ein" statt „Fehler")

Test 5: Dynamische Inhalte (2 Minuten)

Testen Sie Elemente, die sich ohne Seitenneuladen ändern:

• Cookie-Banner:Wird es beim Laden vorgelesen? Kann man mit Tab zu „Akzeptieren" / „Ablehnen" navigieren?
• Warenkorb-Updates: Wird eine Änderung angekündigt?
• Tabs/Akkordeons: Werden Zustandsänderungen (geöffnet/geschlossen) kommuniziert?
• Modale Dialoge: Wird der Focus beim Öffnen ins Modal bewegt? Wird beim Schließen der Focus zurückgesetzt?

Ergebnis dokumentieren

Notieren Sie für jeden Test, was funktioniert und was nicht. Die häufigsten Fehler in der Reihenfolge ihrer Schwere:

1. Kritisch: Tastatur-Fallen, nicht erreichbare Formulare, fehlende Skip-Links
2. Schwerwiegend: Fehlende Alt-Texte, keine Formular-Labels, unsichtbarer Focus
3. Moderat: Fehlerhafte Überschriftenhierarchie, dekorative Bilder nicht stumm
4. Gering: Fehlende ARIA-Labels bei komplexen Widgets, nicht-semantische Listen

Was ein automatisierter Audit zusätzlich findet

Der manuelle Screen-Reader-Test prüft die Nutzererfahrung — ein automatisierter Audit findet die technischen Fehler, die Sie mit dem Ohr nicht hören:

• Exakte Kontrastverhältnisse aller Farbkombinationen
• Fehlende ARIA-Attribute und ungültige Rollen
• HTML-Validierungsfehler (fehlende Labels, doppelte IDs)
• Touch-Target-Größen unter 44×44px
• Fehlende lang-Attribute auf Seitenebene