02/07/2025 Marc CMS, Frontend, Tools

Screenreader: So nutzen blinde Personen deine Webseite

Screenreader sind ein zentrales Werkzeug für digitale Barrierefreiheit – und gewinnen mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) am 28. Juni 2025 weiter an Relevanz. Das neue Gesetz verpflichtet Unternehmen, ihre digitalen Angebote – insbesondere Webseiten – so zu gestalten, dass sie auch für Menschen mit Einschränkungen problemlos nutzbar sind.

Ein besonders wichtiger Aspekt dabei ist die Zugänglichkeit für blinde und sehbehinderte Nutzende, die sich mit Screenreadern durch Inhalte navigieren. In diesem Beitrag erfährst du, wie genau das funktioniert, wie du deine eigene Webseite mit einem Screenreader testen kannst – und welche Tastenkombinationen dabei wichtig sind.

Was ist ein Screenreader – und wie wird er genutzt?

Ein Screenreader analysiert den strukturellen HTML-Code deiner Webseite und gibt Inhalte wie Überschriften, Links, Listen, Buttons oder Formularelemente als Sprache aus. Nutzende bewegen sich dabei ausschließlich mit der Tastatur durch die Seite, da sie die Position des Mauszeigers nicht erfassen können. Das folgende Video veranschaulicht, wie eine blinde Person mit dem Laptop interagiert.

Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.

Einstellung vornehmen

1. Wie blinde Personen Webseiten „lesen“

Stell dir vor, du betrittst einen Raum – ohne Licht, nur mit einer Stimme an deiner Seite, die beschreibt, was um dich herum ist. So funktioniert ein Screenreader:

• Nutzende orientieren sich nicht visuell, sondern über die semantische Struktur der Seite.
• Sie nutzen Tastenkombinationen, um gezielt zu bestimmten Seitenelementen zu springen.
• Die Tabulatortaste ist dabei die wichtigste Taste für interaktive Inhalte, während Buchstabentasten zur Navigation durch strukturierte Inhalte dienen.

2. Die wichtigsten Screenreader – kurz vorgestellt

Windows: Sprachausgabe

• Aktivierung: Windows ⊞ + Strg + Enter ⮠
• Ideal für Einsteiger oder schnelle Tests
• Keine Installation notwendig

macOS: VoiceOver

• Aktivierung: Cmd + F5
• Leistungsfähig und sofort verfügbar auf jedem Mac
• Unterstützt auch Gesten auf dem Trackpad

NVDA (NonVisual Desktop Access)

• Plattform: Windows
• Kostenlos, Open Source
• Link zur Installation NVDA

• Sehr beliebt bei erfahrenen Nutzenden und für professionelle Tests

3. So navigieren Screenreader-Nutzende

Nun stellen wir dir wichtige Shortcuts für die Nutzung der jeweiligen Screenreader vor. Das sind bei weiten nicht alle. Wir haben dir die Dokumentationen weiter unten bei den Quellen verlinkt.

NVDA (Windows)

Für NVDA wird eine NVDA-Taste festgelegt. Dies ist standardmäßig die Taste Einfg. In den Einstellungen kann das aber auch geändert werden. Die Grafik zeigt die wichtigsten Tasten, welche für den Screenreader benötigt werden.

• Nächstes fokussierbares Element: Tab ⇄
• Nächste Überschrift: H
• Nächstes Formularfeld: F
• Link / Button auswählen: Enter ⮠
• Nächste Zeile: Pfeil runter ↓
• Vorherige Zeile: Pfeil hoch ↑
• Lesemodus wechseln: NVDA + Leertaste
• Elemente-Liste öffnen: NVDA + F7
• Von hier ab lesen: NVDA + Pfeil runter ↓
• Vorlesen beenden: NVDA

Bei den ersten drei Befehlen kannst du ebenso das vorherige Element leicht ansteuern. Drücke hierfür jeweils zusätzlich die Shift ⇧ Taste.

Mit dem wechseln der Modi, kannst du statt z.B. mit h zwischen den Überschriften zu springen, die Taste für die Eingabe bei Formularen nutzen. Die Elemente-Liste bietet einen guten Überblick über deine Seite. Einen weiteren Einblick in den NVDA Screenreader gibt das folgende Video.

Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.

Einstellung vornehmen

Windows-Sprachausgabe (Narrator)

Auch hier gibt es eine spezielle Taste, welche für die Sprachausgabe genutzt wird. Neben der Einfg – Taste wie beim NVDA dient auch die Feststelltaste ⇩ standardmäßige als solche.

• Nächstes fokussierbares Element: Tab ⇄
• Nächste Überschrift: H
• Nächstes Formularfeld: F
• Link / Button auswählen: Enter ⮠
• Lesen des Dokumentes starten: Sprachausgabe + Pfeil runter ↓
• Aktuelle Zeile lesen: Sprachausgabe + Pfeil hoch ↑
• Vorlesen beenden: Strg

Nutze wie beim NVDA die Shift ⇧ Taste, um bei den ersten drei Befehlen das vorherige Element anzusteuern.

Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.

Einstellung vornehmen

VoiceOver (macOS)

Bei VoiceOver ist die Spezialtaste standardmäßig auch die Feststelltaste ⇩ oder Control + Option.

• Nächstes fokussierbares Element: Tab ⇄
• Nächste Überschrift:  VoiceOver + H
• Nächstes Formularfeld: VoiceOver + J
• Link / Button auswählen: Enter ⮠
• Von hier ab alles lesen: VoiceOver + a
• Vorlesen beenden: Ctrl
• „Rotor“ öffnen (zur gezielten Navigation): VoiceOver + U

Auch hier kann wieder die Shift ⇧ Taste genutzt werden, um anstelle von nächsten Elementen, das vorherige Element auszuwählen.

Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.

Einstellung vornehmen

4. Teste deine eigene Webseite – in 5 Minuten

1. Starte einen Screenreader (siehe oben)
2. Öffne deine Webseite
3. Navigiere mit Tab durch interaktive Elemente
4. Drücke H, um durch die Überschriften zu springen
5. Versuche ein Formular auszufüllen – wird jeder Schritt verständlich angesagt?

Fazit: Gute Struktur = Gute Orientierung

Wenn du zum ersten Mal einen Screenreader aktivierst und deine eigene Webseite besuchst, wirst du vermutlich überrascht – oder sogar erschrocken – sein:
Es wird viel gesprochen. Sehr viel. Sehr schnell.

Das liegt daran, dass Screenreader standardmäßig versuchen, alle Informationen auf der Seite in strukturierter Reihenfolge auszugeben: Seitentitel, Überschrift, Navigation, Hinweise, Bildbeschreibungen, Links, Buttons, Textinhalte, ARIA-Rollen und mehr.

Für ungeübte Ohren wirkt das schnell wie ein Informationssturm. Aber:
Für blinde Nutzende ist genau das Alltag – sie sind geübt darin, mit diesen Informationen gezielt zu arbeiten.

Deshalb ist es so wichtig, die Seite gut zu strukturieren: Eine klare Überschriftenhierarchie, sinnvolle Linktexte und beschriftete Formulare helfen enorm dabei, Ordnung ins „Sprach-Chaos“ zu bringen. Du wirst den Unterschied sofort merken, wenn du mit H durch die Überschriften springst oder mit Tab zu den interaktiven Elementen gehst.

Ein blinder Mensch „sieht“ deine Webseite über die semantischen HTML-Strukturen. Je klarer diese aufgebaut sind – mit richtigen Überschriften, alt-Texten für Bilder, beschrifteten Formularfeldern und zugänglichen ARIA-Rollen – desto besser die Orientierung. Eine gute Übersicht für HTML-Beispiele findest du unter w3.org.

Was kannst du tun?

Probiere es selbst aus!
Starte einen Screenreader und besuche deine eigene Webseite. Wenn du merkst, dass du „blind“ nicht ans Ziel kommst – dann geht es deinen Usern genauso.

Wir helfen dir bei der Prüfung und Optimierung deines Webangebots nach BFSG-Standards. Du kannst uns einfach über unser Kontaktformular erreichen. Teile uns auch gerne deine Erfahrungen mit Screenreadern in den Kommentaren mit.