ARIA
#Barrierefreie Entwicklung
Was ist ein Screenreader? – Der Goldstandard für digitale Inklusion
Ein Screenreader ist dein unsichtbarer Assistent, der jedes Element deiner Website vorliest – von Überschriften über Links bis zu Formularen. Doch wie gut das funktioniert, liegt grösstenteils in deinen Händen.
Philipp Bremer, 24. September 2025
Screenreader. Für Menschen mit Sehbeeinträchtigung ist das Internet wie Topfschlagen – die Suche mit verbundenen Augen: Wo ist der Button? Du navigierst durchs Internet nur mit deinen Ohren – kein Mausklick, kein visueller Überblick, sondern pure Audio-Navigation. Eine mühevolle, wenn nicht gar vergebliche Suche, gebe es nicht moderne Screen Reader. Millionen Menschen weltweit sind auf Screen Reader angewiesen. Sie übersetzen digitale Inhalte in Sprache oder Braille-Schrift und öffnet blinden und sehbehinderten Menschen so die Tür zur digitalen Welt und deinen Produkten und Services.
Möchtest du wissen, wie barrierefrei deine Website ist? Starte jetzt mit unserem Quick Check und erhalte eine erste Einschätzung!
So funktioniert ein Screenreader im Alltag
Screenreader arbeiten wie ein digitaler Reiseführer durch deine Website. Sie lesen nicht einfach alles von oben nach unten vor, sondern ermöglichen eine intelligente Navigation. Nutzer:innen können zwischen Überschriften springen, Listen durchgehen, Links auflisten lassen oder direkt zu Formularen navigieren.
Hörbeispiel: So klingt eine Website-Navigation
Wenn ein Screenreader auf eine Liste stösst, kündigt er diese an: “Liste mit 4 Elementen”. Dann liest er jeden Punkt vor: “Webdesign, Webentwicklung” und so weiter. Der Nutzer weiss sofort, was ihn erwartet und kann gezielt navigieren.
Das zeigt bereits: Warum ist das als sehende Person ebenfalls relevant? Weil gut strukturierte Inhalte nicht nur Screenreader-Nutzer:innen helfen, sondern deine Website für alle benutzerfreundlicher machen. Eine klare Struktur verbessert auch dein SEO-Ranking!
Die wichtigsten Screeneader im Überblick
Drei Screenreader dominieren den Markt und erreichen über 90% aller Nutzer:innen:
JAWS (Job Access With Speech) – 41% Marktanteil
- Kostenpflichtig (ca. 1’000 CHF)
- Nur für Windows
- Marktführer mit vielen Funktionen
NVDA (NonVisual Desktop Access) – 38% Marktanteil
- Kostenlos und Open Source
- Nur für Windows
- Sehr beliebt wegen der kostenlosen Verfügbarkeit
VoiceOver – 9,7% Marktanteil
- Kostenlos in jedem Mac und iPhone integriert
- Einfache Bedienung für Apple-Nutzer:innen
Wichtig zu wissen: Diese drei Screenreader verhalten sich teilweise unterschiedlich. Deshalb ist es wichtig, dass deine Website mit Web-Standards arbeitet, die von jedem relevaten Screen Reader gelesen werden kann.
Der Code macht den Unterschied
Hier wird es spannend: Screenreader “sehen” deine Website nicht, sondern lesen den HTML-Code. Deshalb ist es so wichtig, dass der Coder einer Website sauber und semantisch korrekt ist:
Saubere Linkstruktur
Gut programmierte Links klingen so:
- “Link: Kontaktiere uns für eine kostenlose Beratung”
- “Link: Lade das Whitepaper zur Barrierefreiheit herunter”
Schlecht programmierte Links klingen so:
- “Link: Hier klicken” (ohne zu wissen, wohin)
- “Link: Mehr” (mehr was?)
- “Link: Weiter” (weiter wohin?)
Button vs. Link
Screenreader unterscheiden zwischen Buttons (für Aktionen) und Links (für Navigation):
- Button: “Button, Formular absenden” oder “Button, Menü öffnen”
- Link: “Link, Zur Startseite” oder “Link, Services ansehen”
Strukturierte Listen
Gute Liste klingt so:
“Liste mit 3 Elementen
- Webdesign
- Webentwicklung
- Beratung
Ende der Liste”
Schlechte Liste ohne HTML-Struktur:
“Webdesign Webentwicklung Beratung” (ohne Struktur und Orientierung)
ARIA-Attribute (Accessible Rich Internet Applications) helfen zusätzlich dabei, komplexere Elemente zu erklären. Sie fungieren wie Untertitel für Screenreader und beschreiben, was visuell passiert.
Praktisches Beispiel: Button mit Statusänderung
Ein “Menü öffnen”-Button mit aria-expanded=”false” wird von NVDA als “Button, Menü öffnen, eingeklappt” angekündigt. Nach dem Klick ändert sich das Attribut zu aria-expanded=”true” und wir nun so angekündigt: “Button, Menü schliessen, ausgeklappt”. So weiss jede:r Nutzer:in genau, was passiert ist.
Das Resultat: Nutzer:innen können effizient navigieren, finden schnell was sie suchen und werden zu treuen Kund:innen. Win-win für alle!
Ein Gewinn für alle
Screenreader öffnen Menschen mit Sehbehinderungen die digitale Welt – aber nur, wenn deine Website richtig entwickelt ist. Die gute Nachricht: Barrierefreie Entwicklung ist nicht kompliziert, wenn man sie von Anfang an mitdenkt.
Die Vorteile liegen auf der Hand:
- Erweiterte Zielgruppe
- Bessere SEO-Rankings
- Höhere Benutzerfreundlichkeit für alle
- Rechtliche Absicherung
- Positives Unternehmensimage
Bereit für den nächsten Schritt? Kontaktiere uns ganz ungeniert und lass uns über dein Vorhaben sprechen.
Über den Autor
Philipp Bremer ist WordPress-Spezialist und Barrierefreiheits-Enthusiast in Zürich. Mit seiner Leidenschaft für inklusive Webentwicklung hilft er Unternehmen, NGOs und Einzelpersonen dabei, Websites zu schaffen, die wirklich für alle Menschen zugänglich sind.
Schon diese Artikel gelesen?
Wir glauben, dass da für jeden was dabei ist:
WCAG 2.1
#Barrierefreiheit verstehen
Mehr erfahren