Screenreader & Co: Wie Menschen mit Sehbehinderung das Web erleben
01.07.2026
MyWebsiteService
Die meisten erleben das Web visuell. Für Menschen, die auf einen Screenreader angewiesen sind, ist das Web ein vollkommen anderes Erlebnis: sequenziell, auditiv, stark abhängig von guter HTML-Struktur. Dieser Artikel nimmt Sie mit.
Was ist ein Screenreader?
Ein Screenreader ist Software, die Bildschirminhalte in Sprache oder Brailleschrift übersetzt. Die bekanntesten sind NVDA (Windows, kostenlos), JAWS (Windows, kommerziell), VoiceOver (Apple, eingebaut) und TalkBack (Android). Screenreader-Nutzer navigieren per Tastatur und hören die Seite in der Reihenfolge des HTML-Codes.
Ein Tag im Web aus der Perspektive eines Screenreader-Nutzers
Szenario 1: Eine gut strukturierte Website
Der Screenreader liest beim Öffnen: „MyWebsiteService — Barrierefreies Webdesign München. Navigation. Hauptinhalt. Überschrift Ebene 1: Barrierefreies Webdesign für Unternehmen…“ Mit der H-Taste springt die Person durch Überschriften und bekommt sofort einen Überblick. Formulare haben klare Labels. Nach dem Absenden: „Ihre Nachricht wurde erfolgreich gesendet.“ Perfekt.
Szenario 2: Eine schlecht strukturierte Website
Beim Öffnen: „Bild. Bild. Bild. Mehr erfahren, Link. Mehr erfahren, Link.“ Keine H1, keine Struktur. Das Formular: „Bearbeitungsfeld. Bearbeitungsfeld. Schaltfläche.“ Keine Labels, keine Orientierung. Nach einem Fehler: „Eingabe ungültig.“ — Welche? Was ist ungültig? Die Person verlässt die Website — nicht weil sie es nicht wollte, sondern weil sie es nicht konnte.
Die 5 häufigsten Barrieren für Screenreader-Nutzer
- Fehlende Alt-Texte: Bilder werden als „Bild“ oder mit dem Dateinamen vorgelesen.
- Nichtssagende Links: „Mehr erfahren“, „Hier klicken“ — ohne Kontext unverständlich.
- Fehlende Überschriften-Hierarchie: Ohne Struktur kein Überblick.
- Nicht beschriftete Formulare: Felder ohne Labels sind für Screenreader unzugänglich.
- Tastaturfallen: Modal öffnet sich, Fokus wird nicht zurückgegeben.
Was jeder Webdesigner einmal tun sollte
NVDA kostenlos herunterladen, die Maus weglegen und die eigene Website mit dem Screenreader erkunden. Diese Erfahrung verändert, wie man Websites baut.
Andere assistive Technologien
- Braillezeilen: Übersetzen Text in tastbare Blindenschrift.
- Schaltersteuerung: Für Menschen mit motorischen Einschränkungen — erfordert vollständige Tastaturzugänglichkeit.
- Vergrößerungssoftware: Layouts müssen bei 200–400 % noch lesbar bleiben.
- Sprachsteuerung: Dragon NaturallySpeaking — sichtbarer Fokus ist Voraussetzung.
Der entscheidende Gedanke: Barrierefreiheit ist kein technische Spezialität — es ist das Design für echte Menschen mit echten Einschränkungen.
Über MyWebsiteService
MyWebsiteService ist die Münchner Agentur von Katja Hazod — seit 2012 an der Seite von Unternehmen, NGOs und Selbständigen. Der Fokus auf barrierefreies Webdesign begann 2018 mit einer Anfrage eines Gehörlosen-Verbands. Seitdem sind wir beflügelt von der Idee, jede Website für wirklich jede Person zugänglich zu machen — mit viel Liebe, Empathie und Wertschätzung.
Unsere Werte: wertschätzend · offen · ehrlich · liebevoll
Unser Motto: Liebe. Lebe. Lache.
Häufig gestellte Fragen zu Gemeinnützigen Organisationen (NGO)
Im Fusion Builder kann beim Heading-Element das HTML-Tag (h1 bis h6) unabhängig von der visuellen Schriftgröße eingestellt werden. Wichtig: pro Seite genau eine h1, dann logisch verschachtelte h2 und h3. Die Browser-Extension „HeadingsMap“ hilft beim schnellen Prüfen.
Gutenberg ist der native WordPress-Editor mit Block-Prinzip. Der Avada Fusion Builder bietet deutlich mehr Gestaltungsoptionen pro Element, globale Einstellungen für Farben und Schriften sowie engere Integration mit dem Avada-Theme. Für komplex gestaltete Seiten mit hohem Designanspruch bietet der Fusion Builder mehr Möglichkeiten.
Ja. Der Fusion Builder ist so aufgebaut, dass Kunden nach einer kurzen Einweisung Texte, Bilder und viele Layoutelemente selbst bearbeiten können. Wir konfigurieren Avada dabei so, dass nur die für den Kunden relevanten Bereiche editierbar sind — das verhindert versehentliche Änderungen am Design.
Der Fusion Builder liefert eine gute Grundlage: Die generierten Elemente verwenden semantisches HTML und grundlegende ARIA-Attribute. WCAG 2.2 AA-Konformität erfordert jedoch zusätzlich korrekte Konfiguration — Alt-Texte, zugängliche Formularlabels, korrekte Überschriften-Hierarchie. Diese Konfiguration ist im Fusion Builder gut möglich, passiert aber nicht automatisch.
Eine Tastaturfalle entsteht, wenn ein Nutzer, der ausschließlich die Tastatur verwendet, in einen Bereich der Website gelangt — z.B. ein Modal oder Dropdown — und diesen nicht mehr verlassen kann. Das passiert häufig, wenn Dialoge den Fokus nicht korrekt einfangen und beim Schließen zurückgeben.
Ohne Alt-Text hören Screenreader-Nutzer entweder gar nichts oder den Dateinamen des Bildes — beides ist nutzlos. Zusätzlich können Suchmaschinen das Bild nicht indexieren. Fehlende Alt-Texte sind einer der häufigsten und gleichzeitig am einfachsten zu behebenden Accessibility-Fehler.
WCAG 2.2 AA fordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text (ab 18pt unformatiert oder 14pt fett). Mit dem kostenlosen WebAIM Contrast Checker lassen sich Farbkombinationen schnell prüfen.
Kostenlose Tools wie WAVE oder der Lighthouse-Audit in Chrome geben einen ersten Überblick. Wichtig: Diese Tools erkennen nur ca. 30–40 % aller Barrieren. Der Rest erfordert manuelles Testing — mit einem echten Screenreader und vollständiger Tastaturnavigation.