Screenreader-Test selbst durchführen: So klingt deine Website

Am Global Accessibility Awareness Day (GAAD) wird viel über Barrierefreiheit gesprochen: über Statistiken, Gesetze, Studien. Was in diesen Gesprächen oft fehlt, ist die direkte Erfahrung. Wer noch nie selbst getestet hat, redet über Barrierefreiheit aus zweiter Hand.

Dabei liegen die Werkzeuge bereits auf dem eigenen Laptop. Es braucht keine Lizenz, keine Schulung, kein Budget. Nur ein paar Minuten und die Bereitschaft, die eigene Seite einmal anders zu erleben.

Hier sind drei Tests, die jeder Webentwickler heute machen kann.

Test 1: Screen Reader anhören

Ein Screenreader gibt Inhalte aus, die Browser und Betriebssystem über den Accessibility Tree bzw. Accessibility APIs bereitstellen. Je nach Modus liest er fokussierte Elemente, Textbereiche, Überschriften, Links, Formularfelder oder andere semantische Strukturen vor. Auf Webseiten haben Screenreader oft einen eigenen Lese- oder Browse-Modus – sie hängen also nicht nur am Tastaturfokus.

Für blinde und stark sehbehinderte Nutzer ist der Screenreader der primäre Zugang zum Web. Wer hören will, wie die eigene Seite für diese Nutzer klingt, braucht keine zusätzliche Software – jedes Betriebssystem bringt einen mit.

macOS – VoiceOver (vorinstalliert)

• Dreimal auf die Touch-ID-Taste drücken → Bedienungshilfen-Menü öffnet sich
• VoiceOver aktivieren
• Navigieren mit Control + Option + Pfeiltasten
• Tipp: Caption-Panel aktivieren unter Systemeinstellungen → Bedienungshilfen → VoiceOver → Allgemein. So liest man parallel mit, was vorgelesen wird.

Windows – NVDA (gratis, Open Source)

• Herunterladen unter nvaccess.org

In Webseiten arbeitet NVDA meist im Browse Mode. Für einen ersten Test reichen:

• Tab und Shift + Tab, um fokussierbare Elemente zu prüfen
• Pfeiltasten, um Inhalte zeilenweise zu lesen
• H, um von Überschrift zu Überschrift zu springen
• K, um von Link zu Link zu springen
• F, um Formularfelder anzusteuern
• NVDA + Pfeil runter, um ab der aktuellen Position weiter vorlesen zu lassen

Die NVDA-Taste ist standardmäßig Insert, kann aber auch Caps Lock sein.

Narrator ist vorinstalliert, aber bei tatsächlichen Nutzern weniger verbreitet als NVDA und JAWS. JAWS ist besonders im professionellen und nordamerikanischen Umfeld stark verbreitet. NVDA ist kostenlos, in Europa sehr verbreitet und für Einstiegstests meist die pragmatischste Wahl.

Für einen ersten Windows-Test reicht NVDA meist aus. Für belastbare Audits sollten aber mehrere relevante Kombinationen berücksichtigt werden, zum Beispiel NVDA/Chrome, JAWS/Chrome oder Edge, VoiceOver/Safari und mobile Screenreader.

iOS – VoiceOver

• Einstellungen → Bedienungshilfen → VoiceOver aktivieren
• Mit einem Finger nach rechts wischen → nächstes Element
• Doppelt-tippen aktiviert das fokussierte Element
• Tipp: Über Bedienungshilfen-Kurzbefehl aufs Dreifach-Drücken der Seitentaste legen

Android – TalkBack

• Einstellungen → Bedienungshilfen → TalkBack aktivieren
• Ähnliche Wischgesten wie iOS, mit kleinen Unterschieden je nach Hersteller

Worauf achten:

• Was sagt der Screenreader als erstes nach dem Seitenladen? Ergibt das einen Sinn?
• Werden Bilder mit aussagekräftigen Alt-Texten beschrieben – oder mit Dateinamen wie „IMG_4523.jpg”?
• Werden Buttons als „Button” angekündigt, oder nur als beliebiger Text?
• Ist die Überschriftenstruktur semantisch sinnvoll und hierarchisch nachvollziehbar? Unerklärliche Sprünge, fehlende Überschriften oder rein visuell gestylte Überschriften ohne echtes HTML-Heading sind Warnsignale.
• Lassen sich Listen und Tabellen strukturiert erfassen?

Test 2: Tastatur-Navigation

Viele Nutzer kommen nie an die Maus: Menschen mit motorischen Einschränkungen, Screen-Reader-Nutzer, Power-User. Wenn eine Seite nur mit Tab durchnavigierbar ist, fällt schnell auf, was funktioniert und was nicht.

So geht’s:

• Maus weglegen, Cursor in die Adressleiste, dann Tab drücken
• Vorwärts mit Tab, rückwärts mit Shift + Tab
• Enter aktiviert Links und Buttons. Space aktiviert Buttons, Checkboxen und ähnliche Bedienelemente. Bei Links scrollt Space im Browser normalerweise die Seite und ist nicht die Standard-Aktivierung.

Wichtig auf macOS:

Standardmäßig springt Tab nur zwischen Formularfeldern, nicht zwischen Links. Unter Systemeinstellungen → Tastatur → Tastatur-Navigation aktivieren, damit alle interaktiven Elemente erreichbar sind. Ohne diese Einstellung sind die Testergebnisse irreführend.

Worauf achten:

• Ist der Fokus immer sichtbar? Ein dezent gestylter blauer Rahmen reicht – komplett ausgeblendet (outline: none) ist ein häufiger und schwerwiegender Designfehler.
• Ist die Reihenfolge logisch? Sprünge nach oben oder in versteckte Seitenleisten irritieren.
• Sind alle Funktionen erreichbar? Hover-Menüs, Modals, Custom-Komponenten sind klassische Stolpersteine.
• Gibt es einen „Zum Hauptinhalt springen”-Link am Anfang?

Test 3: Browser-DevTools

Was Augen und Ohren nicht erwischen, finden die Entwicklerwerkzeuge im Browser. Diese Tools sind kostenlos und in den meisten Fällen ausreichend für einen ersten technischen Überblick.

Chrome / Edge – Lighthouse

• DevTools öffnen (F12 oder Cmd + Option + I)
• Reiter Lighthouse → Kategorie „Accessibility” → „Analyze page load”
• Liefert einen Score und eine Liste konkreter Probleme mit Behebungsvorschlägen

Firefox – Accessibility-Inspector

• DevTools öffnen, Reiter Accessibility
• Zeigt den Accessibility Tree: eine technische Ansicht der Informationen, die der Browser an assistive Technologien wie Screenreader weitergibt
• Hilft zu prüfen, ob Name, Rolle, Zustand und Struktur eines Elements korrekt erkennbar sind
• Praktisch für Kontrast-Prüfungen und ARIA-Fehler

Browser-Extensions

• axe DevTools (Chrome, Firefox): präziser als Lighthouse für tiefergehende Checks, mit kostenloser Basis-Version
• WAVE (Chrome, Firefox): visualisiert Probleme direkt auf der Seite – gut für nicht-technische Stakeholder
• Beide sind in der kostenlosen Version für die meisten Anwendungsfälle ausreichend

Color-Contrast-Checker

• Im DevTools-Inspector vieler Browser direkt eingebaut
• Standalone: WebAIM Contrast Checker

Was diese Tests zeigen – und was nicht

Diese drei Tests decken die offensichtlichen Probleme auf: fehlende Alt-Texte, unstrukturierte Headings, unsichtbare Fokus-Indikatoren, schlechte Kontraste, kaputte Tab-Reihenfolge.

Was sie nicht zeigen: ob ein Alt-Text inhaltlich Sinn ergibt. Ob die Tab-Reihenfolge nicht nur funktioniert, sondern logisch ist. Ob Screenreader-Nutzer den Kontext einer Seite verstehen. Ob ein Formular tatsächlich benutzbar ist – nicht nur technisch korrekt.

Ein Screenreader-Test ist ein wichtiger Praxistest, aber kein vollständiger Accessibility-Audit. Viele Barrieren betreffen auch Tastaturbedienung, Kontraste, verständliche Fehlermeldungen, sichtbaren Fokus, Zoom/Reflow, reduzierte Bewegung oder kognitive Verständlichkeit.

Ein automatisierter Barrierefreiheitstest findet je nach Methode nur einen Teil der Probleme. Häufig wird als Faustregel genannt, dass automatische Tests etwa 30–40% der Problemtypen erkennen. Manche Studien messen bei konkreten Issue-Mengen höhere Werte. In jedem Fall ersetzen automatische Tests keine Tastaturtests, Screenreader-Tests und menschliche Bewertung.

Aber: dieser automatisierte Teil ist ein guter Anfang. Wer noch nie selbst getestet hat, findet im ersten Durchgang üblicherweise mehr, als erwartet wurde. In einem WCAG-Audit mit Screenreader- und Tastatur-Test werden die Seiten ebenfalls mit diesen Methoden strukturiert getestet.

Was du aus dem Test mitnehmen solltest

Wenn du nach zehn Minuten mehrere Probleme findest, ist das normal. Der erste Test ersetzt keinen Audit, aber er zeigt, wo echte Nutzer wahrscheinlich hängen bleiben: bei unklaren Buttons, fehlendem Fokus, schlechter Überschriftenstruktur oder Formularen, die nur visuell verständlich sind.

Der nächste Schritt

Wer ohne Anleitung loslegen will: Screenreader anschalten, fünf Minuten auf der eigenen Seite navigieren. Das reicht oft schon für eine erste Erkenntnis.

Wer einen strukturierten Überblick will:

→ Kostenlos prüfen auf barrieretest.at

Wer Unterstützung bei der Umsetzung sucht – sei es ein konkretes Problem oder ein systematischer Audit:

→ Kostenloses Erstgespräch buchen

Kein Verkaufsgespräch. Eine ehrliche Einschätzung, ob und welche Unterstützung sinnvoll ist.