Screenreader: So lesen blinde Menschen Websites
Also called: Bildschirmleser, Bildschirmleseprogramm, Vorlesesoftware für Blinde
Definition
Ein Screenreader ist eine assistive Software, die Inhalte und Bedienelemente des Bildschirms vorliest oder auf einer Braillezeile ausgibt. Er ist auf die Namen, Rollen und Zustände angewiesen, die eine Website über den Barrierefreiheitsbaum des Browsers bereitstellt.
Ein Screenreader ist eine Software, die den Bildschirminhalt vorliest oder an eine Braillezeile sendet. Blinde und viele sehbehinderte Menschen lesen damit Websites, füllen Formulare aus und kaufen online ein – ausschließlich per Tastatur oder Wischgesten. Der Bildschirmleser kann nur ansagen, was der Code der Website ihm mitteilt: Fehlen Namen und Rollen, kommen seine Nutzer nicht weiter.
Was es bedeutet
Das W3C ordnet Screenreader den assistiven Technologien zu: Werkzeuge, mit denen blinde Menschen Text über Sprachausgabe oder Braille lesen. Ein Screenreader sieht Ihr Design nicht. Er liest den Barrierefreiheitsbaum (Accessibility Tree), den der Browser aus Ihrem HTML erstellt – jedes Element mit Name, Rolle und Zustand, etwa „In den Warenkorb, Schalter“ oder „Newsletter, Kontrollkästchen, nicht aktiviert“.
Deshalb ist WCAG 4.1.2 Name, Rolle, Wert, ein Kriterium der Stufe A der WCAG 2.2, so wichtig. Es verlangt, dass Name und Rolle jeder Komponente programmatisch ermittelbar sind und Zustände sowie deren Änderungen assistiven Technologien zur Verfügung stehen. Native HTML-Elemente erledigen das von selbst. Eigene Steuerelemente aus div und span brauchen zusätzliche Arbeit, meist mit ARIA.
| Screenreader | Plattform | Kosten |
|---|---|---|
| VoiceOver | macOS, iOS, iPadOS | Integriert |
| TalkBack | Android | Integriert |
| Sprachausgabe (Narrator) | Windows | Integriert |
| NVDA | Windows | Kostenlos, Open Source |
| JAWS | Windows | Kostenpflichtig |
Screenreader-Nutzer lesen eine Seite selten von oben nach unten. Sie springen zwischen Überschriften, ARIA-Landmarks, Links und Formularfeldern. Eine saubere Überschriftenstruktur und klare Namen machen das schnell; eine Seite voller namenloser Symbole und „Hier klicken“-Links macht es mühsam.
Praxisbeispiele
<!-- Wird nicht als Schalter erkannt – niemand weiß, was es tut -->
<div class="icon-cart" onclick="openCart()"></div>
<!-- Wird angesagt als „Warenkorb, 3 Artikel, Schalter“ -->
<button type="button" aria-label="Warenkorb, 3 Artikel">
<svg aria-hidden="true">…</svg>
</button>
<!-- Richtige Aussprache, weil die Sprache gesetzt ist -->
<html lang="de">Native HTML-Elemente verwenden (button, a, label, h1–h6, nav, main). Bildern einen aussagekräftigen Alternativtext geben und rein dekorative Symbole mit aria-hidden="true" ausblenden. Statusmeldungen wie „Zum Warenkorb hinzugefügt“ ansagen lassen.
Bedienelemente aus einfachen div-Elementen bauen, wichtigen Text nur als Bild einbinden, auf Farbe oder Position verweisen („Klicken Sie auf den grünen Button rechts“) oder fokussierbare Elemente mit aria-hidden verstecken.
So testen Sie mit einem Screenreader
Häufige Fragen
Wer nutzt einen Screenreader?
Vor allem blinde und stark sehbehinderte Menschen, aber auch manche Menschen mit Legasthenie oder kognitiven Einschränkungen, die lieber zuhören als lesen.
Mit welchem Screenreader sollte ich testen?
Mit dem, den Ihre Besucher nutzen: NVDA oder JAWS mit Chrome oder Firefox unter Windows, VoiceOver mit Safari auf Apple-Geräten, TalkBack unter Android. Ein Screenreader am Desktop und einer am Smartphone decken die meisten Probleme ab.
Liest ein Screenreader Bilder vor?
Nur über ihren Alternativtext. Fehlt er, sagt er den Dateinamen an oder überspringt das Bild. Dekorative Bilder sollten ein leeres alt="" haben, damit sie bewusst übersprungen werden.
Wie finde ich Screenreader-Probleme ohne manuellen Test?
Automatische Prüfungen finden einen großen Teil der technischen Ursachen – fehlende Namen, fehlende Alternativtexte, fehlende Sprachangabe. Der kostenlose WCAG-Scanner prüft Ihre Startseite nach WCAG 2.2 AA; ein manueller Test zeigt dann, ob die Seite auch beim Zuhören verständlich ist.
Related terms
Zugänglicher Name: Was er ist und woher er kommt
Der zugängliche Name ist der Text, den der Browser an assistive Technologien weitergibt, um ein Element zu benennen – etwa die Worte, die ein Screenreader für einen Button, Link oder ein Formularfeld ansagt. WCAG 4.1.2 verlangt für jedes Bedienelement einen programmatisch ermittelbaren Namen.
Read definition: Zugänglicher Name: Was er ist und woher er kommtARIA: Rollen, Zustände und Eigenschaften erklärt
ARIA (WAI-ARIA, Accessible Rich Internet Applications) ist eine W3C-Spezifikation für HTML-Attribute – Rollen, Zustände und Eigenschaften –, die assistiven Technologien mitteilen, was ein eigenes Element ist, wie es heißt und in welchem Zustand es sich befindet.
Read definition: ARIA: Rollen, Zustände und Eigenschaften erklärtAlternativtext: Gute Alt-Texte für Bilder schreiben
Ein Alternativtext ist eine kurze Textbeschreibung eines Bildes im alt-Attribut. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn das Bild nicht lädt, und Suchmaschinen nutzen ihn, um den Bildinhalt zu verstehen.
Read definition: Alternativtext: Gute Alt-Texte für Bilder schreibenARIA-Landmarks: Seitenbereiche für Screenreader
ARIA-Landmarks sind Rollen wie banner, navigation, main und contentinfo, die die großen Bereiche einer Seite kennzeichnen. Screenreader listen sie auf, sodass Nutzer direkt zu jedem Bereich springen können.
Read definition: ARIA-Landmarks: Seitenbereiche für Screenreader