Ein Screen Reader ist das wichtigste Hilfsmittel für blinde und stark sehbehinderte Nutzer. Er liest Webseiten-Inhalte vor — aber nur das, was im HTML korrekt ausgezeichnet ist. Dieser Artikel zeigt Ihnen, wie Sie selbst mit einem Screen Reader testen und was dabei zu prüfen ist.
Die wichtigsten Screen Reader im Überblick
NVDA (Windows)
Kostenlos, Open Source. Der meistgenutzte kostenlose Screen Reader. Empfohlene Kombination: NVDA + Google Chrome.
Download: nvaccess.org
VoiceOver (Mac/iOS)
In macOS und iOS eingebaut. Empfohlene Kombination: VoiceOver + Safari. Aktivierung: Cmd+F5 (Mac) oder Einstellungen → Bedienungshilfen (iOS).
JAWS (Windows)
Kommerziell (~1.000–1.500 €/Jahr), aber der meistgenutzte Screen Reader insgesamt. 40-Tage-Testversion verfügbar. Wichtig für Enterprise-Testing.
TalkBack (Android)
Eingebaut in Android. Aktivierung: Einstellungen → Bedienungshilfen → TalkBack. Wichtig für mobile App-Tests.
NVDA-Setup in 5 Minuten
- NVDA von nvaccess.org herunterladen und installieren
- Nach Installation startet NVDA automatisch — Sie hören eine Ansage
- Chrome öffnen (NVDA + Chrome ist die empfohlene Kombination)
- NVDA+Q zum Beenden, falls nötig
- Empfehlung: Kopfhörer aufsetzen und Lautsprecher nutzen
Die wichtigsten NVDA-Tastenbefehle
| Taste | Funktion |
|---|---|
| NVDA + Leertaste | Browse/Focus Mode umschalten |
| H | Zur nächsten Überschrift springen |
| Shift + H | Zur vorherigen Überschrift |
| 1–6 | Zur Überschrift der Ebene 1–6 |
| B | Zum nächsten Button |
| F | Zum nächsten Formularfeld |
| L | Zur nächsten Liste |
| T | Zur nächsten Tabelle |
| I | Zum nächsten Bild (Image) |
| Ctrl | Vorlesen pausieren |
| NVDA + F7 | Liste aller Links/Überschriften/Landmarks |
| Tab | Zum nächsten Link/Button (Focus Mode) |
Was Sie mit dem Screen Reader testen sollten
1. Seitenstruktur per Überschriften
Drücken Sie NVDA+F7 und öffnen Sie die Überschriftenliste. Ergibt die Struktur Sinn? Gibt es eine H1? Sind die Hierarchieebenen logisch? Screen-Reader-Nutzer navigieren primär über Überschriften — sie sind das Inhaltsverzeichnis der Seite.
2. Bilder und Alt-Texte
Drücken Sie "I" um durch alle Bilder zu springen. Was liest NVDA vor? "Grafik image-1234.jpg" ist ein Fehler. Dekorative Bilder sollten komplett übersprungen werden (alt=""). Informative Bilder sollten einen sinnvollen Alt-Text haben.
3. Links und ihre Bedeutung
NVDA+F7 → Links anzeigen. Ergeben alle Links ohne Kontext Sinn? "Hier klicken" und "Mehr erfahren" sind schlechte Link-Texte. "Barrierefreiheits-Leitfaden herunterladen" ist gut. WCAG 2.4.4 fordert verständliche Link-Texte im Kontext.
4. Formulare
Tab durch alle Formularfelder. Liest NVDA den Label-Text vor, wenn Sie ein Feld fokussieren? Hören Sie "Vorname, Pflichtfeld, Bearbeitungsfeld"? Das ist korrekt. "Bearbeitungsfeld" allein bedeutet: Das Label fehlt.
5. Dynamische Inhalte
Öffnen Sie ein Dropdown-Menü. Gibt NVDA an, dass es "zugeklappt" ist und nach der Aktivierung "ausgeklappt"? Gibt es nach dem Absenden eines Formulars eine Fehler- oder Erfolgsmeldung, die vorgelesen wird?
Häufige Screen-Reader-Probleme auf Websites
Fehlende Landmarks
Screen-Reader-Nutzer springen per Landmark (main, nav, header, footer) durch die Seite. Ohne semantisches HTML gibt es keine Landmarks.
Karussells ohne Pause
Sich automatisch bewegende Inhalte werden mitten im Vorlesen unterbrochen. WCAG 2.2.2 fordert eine Pause-Funktion.
Modals ohne Fokus-Trap
Wenn der Fokus beim Öffnen eines Modals nicht ins Modal springt, navigiert der Screen Reader weiter im Hintergrund.
Tabellen ohne Header
Ohne <th scope='col'>-Header weiß der Screen Reader nicht, zu welcher Spalte/Zeile eine Zelle gehört.
Icon-Buttons ohne Namen
Ein Button mit nur einem SVG-Icon und keinem aria-label — NVDA liest 'Schaltfläche' und nichts weiter.
VoiceOver-Kurzanleitung (Mac)
VoiceOver-Modifier-Taste: Caps Lock oder Strg+Alt (VO-Taste)
- Cmd+F5 — VoiceOver ein/ausschalten
- VO+U — Rotor öffnen (Überschriften, Links, Landmarks)
- VO+Pfeiltasten — Durch Elemente navigieren
- VO+Space — Element aktivieren
- VO+Cmd+H — Zur nächsten Überschrift
Automatische Vorbereitung für Screen-Reader-Tests
Unser Scanner erkennt viele Screen-Reader-relevante Probleme automatisch — fehlende Alt-Texte, fehlende Landmark-Struktur, Label-Probleme. Damit wissen Sie vor dem manuellen Test, wo Sie zuerst hinschauen sollten.
Website kostenlos analysieren →