Warum Screenreader-Tests unverzichtbar sind
Die Grenzen automatisierter Tools
Tools wie WAVE, axe oder Lighthouse prüfen technische Kriterien: Ist ein Alt-Text vorhanden? Ist der Kontrast ausreichend? Gibt es ein Label für das Formularfeld?
Was sie nicht prüfen können:
- • Ist der Alt-Text sinnvoll oder nur "Bild1.jpg"?
- • Ergibt die Lesereihenfolge Sinn?
- • Ist das Formular verständlich zu bedienen?
- • Funktioniert die Navigation logisch?
Ein Screenreader-Test zwingt Sie, Ihre Website aus einer voellig anderen Perspektive zu erleben. Ploetzlich sind Sie auf die lineare Abfolge der Inhalte angewiesen, auf korrekte Überschriften, auf aussagekräftige Linktexte. Dieser Perspektivwechsel ist unbezahlbar für das Verständnis von Barrierefreiheit.
Screenreader-Optionen im Überblick
NVDA (Windows) – Die Empfehlung
NVDA (NonVisual Desktop Access) ist ein kostenloser Open-Source-Screenreader für Windows. Er wird weltweit von Millionen blinden und sehbehinderten Menschen genutzt.
- ✓ Komplett kostenlos
- ✓ Aktive Entwicklung und regelmaessige Updates
- ✓ Funktioniert hervorragend mit Firefox und Chrome
- ✓ Portable Version ohne Installation verfügbar
Download: nvaccess.org (ca. 50 MB)
VoiceOver (macOS/iOS) – Integriert
Auf Apple-Geraeten vorinstalliert. Aktivierung: Cmd + F5 (Mac) oder Einstellungen → Bedienungshilfen (iPhone/iPad).
Gut für mobile Tests, aber andere Tastenbefehle als NVDA.
JAWS (Windows) – Der Profi
Der meistgenutzte kommerzielle Screenreader. Wird von vielen blinden Verwaltungsmitarbeitern verwendet.
Kostenpflichtig (ca. 1.000 Euro Lizenz) – für gelegentliche Tests ueberdimensioniert.
Narrator (Windows) – Eingebaut
Windows bringt mit Narrator einen eigenen Screenreader mit. Aktivierung: Win + Strg + Enter.
Für erste Experimente geeignet, für ernsthafte Tests nicht empfohlen.
Unsere Empfehlung: NVDA mit Firefox. Diese Kombination ist kostenlos, gut dokumentiert und entspricht dem, was viele blinde Nutzer tatsaechlich verwenden.
NVDA installieren und einrichten
Die Installation dauert etwa 5 Minuten. Hier ist die Schritt-für-Schritt-Anleitung.
Download
Laden Sie NVDA von nvaccess.org herunter. Wählen Sie die Standardinstallation.
Installation
Die Installation ist selbsterklärend. NVDA startet automatisch nach der Installation und beginnt zu sprechen – keine Sorge, das ist normal.
Erste Konfiguration
Im Willkommensdialog können Sie die NVDA-Taste festlegen. Standard ist die Einfügen-Taste (Ins). Diese Taste ist wichtig für viele Tastenkombinationen.
Wichtige Einstellungen für Tests
Visuelle Hervorhebung aktivieren:
Rechtsklick NVDA-Symbol → Optionen → Einstellungen → "Hervorhebung aktivieren"
Sprachbetrachter aktivieren:
Rechtsklick NVDA-Symbol → Werkzeuge → Sprachausgaben-Betrachter
Browser vorbereiten
NVDA funktioniert am besten mit Firefox. Stellen Sie sicher, dass Firefox installiert ist.
Die wichtigsten Tastenkombinationen
Screenreader werden primaer per Tastatur bedient. Hier sind die Befehle, die Sie für den Test brauchen.
Grundlegende Navigation
| Taste | Funktion |
|---|---|
| Tab | Naechstes interaktives Element |
| Shift + Tab | Vorheriges interaktives Element |
| Pfeiltasten | Zeilenweise durch Inhalt navigieren |
| Ins + Pfeiltasten | Zeichenweise lesen |
| Strg | Sprachausgabe stoppen |
| Ins + Q | NVDA beenden |
Schnellnavigation (Lesemodus)
Im Lesemodus können Sie mit einzelnen Tasten zu bestimmten Elementen springen:
Tipp: Shift + Taste springt zum vorherigen Element (z.B. Shift + H = vorherige Überschrift).
Elementlisten
Ins + F7 = Elementliste oeffnen
Dann: Alt + H für Überschriften, Alt + K für Links
Der 30-Minuten-Test: Schritt für Schritt
Vorbereitung (2 Minuten)
- ✓ NVDA starten (falls nicht automatisch)
- ✓ Firefox oeffnen
- ✓ Sprachbetrachter aktivieren
- ✓ Ihre Website aufrufen
Test 1: Seitentitel (1 Minute)
Was Sie tun: Laden Sie die Startseite. NVDA liest automatisch den Seitentitel vor.
Was Sie prüfen: Wird ein aussagekräftiger Titel vorgelesen?
Typische Fehler: "Startseite" (zu generisch), nur der Organisationsname, technische Bezeichnungen ("index.html")
Test 2: Überschriftenstruktur (5 Minuten)
Was Sie tun: Druecken Sie Ins + F7, dann Alt + H für die Überschriftenliste.
Was Sie prüfen: Gibt es eine H1? Ist die Hierarchie logisch (H1 → H2 → H3)?
Typische Fehler: Keine H1, Spruenge in der Hierarchie (H1 → H3), Überschriften nur wegen der Formatierung
Test 3: Navigation (5 Minuten)
Was Sie tun: Druecken Sie Tab wiederholt, um durch die interaktiven Elemente zu navigieren.
Was Sie prüfen: Erreichen Sie alle Menüpunkte? Ist die Reihenfolge logisch? Gibt es einen "Skip to content"-Link?
Typische Fehler: Untermenues nur bei Mouse-Hover, kein Skip-Link, unlogische Tab-Reihenfolge
Test 4: Links (5 Minuten)
Was Sie tun: Druecken Sie Ins + F7 für die Linkliste.
Was Sie prüfen: Sind die Linktexte aussagekräftig? Kann man das Linkziel verstehen?
Typische Fehler: "Hier klicken", "Mehr", "Weiterlesen" (nichtssagend), mehrfach "Download" ohne Unterscheidung
Test 5: Bilder (5 Minuten)
Was Sie tun: Druecken Sie wiederholt G, um durch die Bilder zu navigieren.
Was Sie prüfen: Haben informative Bilder Alt-Texte? Sind sie aussagekräftig?
Typische Fehler: "Bild", "Grafik", "IMG_1234.jpg", Alt-Text beschreibt nicht was zu sehen ist
Test 6: Formular (7 Minuten)
Was Sie tun: Navigieren Sie zu einem Formular. Druecken Sie F für das erste Feld, dann Tab für weitere.
Was Sie prüfen: Wird bei jedem Feld erklärt, was einzugeben ist? Sind Pflichtfelder gekennzeichnet?
Typische Fehler: NVDA sagt nur "Eingabefeld" ohne Beschreibung, Pflichtfelder nicht erkennbar
Test: Fuellen Sie das Formular absichtlich falsch aus und senden Sie es ab. Werden Fehlermeldungen vorgelesen?
Typische Probleme erkennen
"Grafik" ohne Beschreibung
Was Sie hoeren: "Grafik" oder "Grafik, Link"
Lösung: Aussagekräftigen Alt-Text ergänzen.
"Link, Link, Link"
Was Sie hoeren: Mehrere Links hintereinander, die nur "Link" genannt werden.
Typisches Beispiel: Social-Media-Icons ohne Beschreibung.
Überschriftenspruenge
Was Sie sehen: H1, H3, H2, H4 – durcheinander
Verwirrend für Screenreader-Nutzer, die nach Überschriften navigieren.
"Eingabefeld" ohne Kontext
Was Sie hoeren: "Eingabefeld, Bearbeiten" – aber nicht, was eingegeben werden soll.
Bedeutet: Das Formularfeld hat kein verknüpftes Label.
Tastaturfalle
Was passiert: Sie können mit Tab in ein Element hinein, aber nicht mehr hinaus.
Bedeutet: Das JavaScript-Widget hat keine Tastaturunterstützung.
Ergebnisse dokumentieren und weitergeben
Für jedes Problem notieren
- Wo: URL und Element (z.B. "Startseite, Bild unter 'Aktuelles'")
- Was: Was NVDA vorgelesen hat (oder nicht)
- Warum problematisch: Welche Barriere entsteht
- Empfehlung: Konkrete Lösung
- Priorität: Hoch/Mittel/Niedrig
An die Entwicklung uebergeben
Entwickler brauchen konkrete Informationen: Exakte URL, welches HTML-Element betroffen ist, was der erwartete Zustand waere, ggf. Code-Beispiel für die Lösung.
Fazit: 30 Minuten, die sich lohnen
Ein Screenreader-Test ist keine Raketenwissenschaft. Mit NVDA, etwas Vorbereitung und dieser Anleitung können Sie in 30 Minuten Barrieren finden, die kein automatisches Tool erkennt.
Der wichtigste Effekt ist vielleicht nicht einmal die Fehlerliste – sondern der Perspektivwechsel. Wenn Sie einmal erlebt haben, wie frustrierend eine Website ohne vernuenftige Überschriften oder mit nichtssagenden Linktexten ist, werden Sie nie wieder so entwickeln.
Machen Sie den Test zur Gewohnheit: Jede neue Seite, jedes neue Feature einmal mit NVDA durchgehen. Es dauert nicht lange – und es macht Ihre Website für alle besser.