# Screenreader: So lesen blinde Menschen Websites

Source: https://allyway.ai/de/glossary/screenreader

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](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html), ein Kriterium der Stufe A der [WCAG 2.2](https://allyway.ai/de/regulations/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](https://allyway.ai/de/glossary/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](https://allyway.ai/de/glossary/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.

> **Note:** > **Was ein Screenreader von Ihrer Seite braucht**
> Textalternativen für Bilder ([Alternativtext](https://allyway.ai/de/glossary/alternativtext)), einen [zugänglichen Namen](https://allyway.ai/de/glossary/zugaenglicher-name) für jeden Link, Button und jedes Feld, ein korrektes `lang`-Attribut für die richtige Aussprache, echte Überschriften und eine logische Reihenfolge.

## Praxisbeispiele

```html title="Beispiel"
<!-- 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">
```

**Do:** Do

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.

**Don't:** Don't

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

Q: Wer nutzt einen Screenreader?
A: Vor allem blinde und stark sehbehinderte Menschen, aber auch manche Menschen mit Legasthenie oder kognitiven Einschränkungen, die lieber zuhören als lesen.

Q: Mit welchem Screenreader sollte ich testen?
A: 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.

Q: Liest ein Screenreader Bilder vor?
A: 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.

Q: Wie finde ich Screenreader-Probleme ohne manuellen Test?
A: Automatische Prüfungen finden einen großen Teil der technischen Ursachen – fehlende Namen, fehlende Alternativtexte, fehlende Sprachangabe. Der [kostenlose WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites) prüft Ihre Startseite nach WCAG 2.2 AA; ein manueller Test zeigt dann, ob die Seite auch beim Zuhören verständlich ist.