Die meisten Menschen, die eine Website gestalten, haben sie sich noch nie vorlesen lassen. Für viele Besucher ist genau das Alltag. Sie hören die Seite über einen Screenreader und bedienen sie mit der Tastatur oder mit Gesten auf dem Handy.
Wer das einmal selbst ausprobiert, merkt schnell, wo die eigene Seite hakt. Dafür brauchst du weder Vorkenntnisse noch Geld.
Was ein Screenreader ist
Ein Screenreader ist ein Programm, das den Inhalt des Bildschirms in Sprache umwandelt. Er liest Texte vor, sagt an, ob etwas ein Link, ein Button oder eine Überschrift ist, und meldet, was nach einem Klick passiert.
Viele Menschen, die blind sind, nutzen zusätzlich eine Braillezeile wie auf dem Titelbild. Das ist ein Gerät, auf dem kleine Stifte nach oben fahren und die Zeichen in Blindenschrift ertastbar machen. Der Screenreader steuert beides.
Genutzt werden Screenreader nicht nur von blinden Menschen. Auch Menschen mit starker Sehschwäche, mit Leseschwäche oder nach einem Schlaganfall lassen sich Texte vorlesen.
Wie Menschen mit Screenreader eine Website nutzen
Kaum jemand hört sich eine Seite von oben bis unten an. Das wäre so, als würdest du einen Prospekt Wort für Wort lesen, bevor du entscheidest, ob er dich interessiert. Stattdessen springen Nutzer gezielt durch die Seite:
- Über Überschriften. Mit einer Taste geht es zur nächsten Überschrift. So entsteht schnell ein Überblick, worum es auf der Seite geht.
- Über Bereiche. Kopfzeile, Navigation, Hauptinhalt und Fußzeile lassen sich direkt ansteuern, wenn sie im Code richtig ausgezeichnet sind.
- Über Listen. Screenreader können alle Links, Überschriften oder Formularfelder einer Seite als Liste anzeigen.
- Mit der Tab-Taste. Sie springt von einem bedienbaren Element zum nächsten, also von Link zu Link und von Button zu Button.
Die Umfrage von WebAIM unter Screenreader-Nutzern zeigt seit Jahren dasselbe Bild. Die meisten Befragten suchen auf einer neuen Seite zuerst über die Überschriften nach dem, was sie brauchen. Fehlen Überschriften oder sind sie nur fett gedruckter Normaltext, geht das nicht.
Welche Screenreader es gibt
Für die gängigen Systeme gibt es mindestens einen kostenlosen Screenreader:
- NVDA für Windows, kostenlos und quelloffen, entwickelt von NV Access. Am Computer einer der am weitesten verbreiteten Screenreader.
- JAWS für Windows, kostenpflichtig, von Freedom Scientific. Lange der Standard in Unternehmen. Ohne Lizenz läuft er jeweils 40 Minuten im Demo-Modus.
- Sprachausgabe heißt der Screenreader, der in Windows eingebaut ist.
- VoiceOver ist auf Mac, iPhone und iPad eingebaut.
- TalkBack ist auf den meisten Android-Handys vorinstalliert.
Zum Testen deiner Website eignen sich NVDA unter Windows und VoiceOver auf dem Mac am besten.
Screenreader einschalten
VoiceOver auf dem Mac
Drück Command und F5. Beim ersten Start erklärt dir ein kurzer Einstieg die wichtigsten Tasten. Die Steuertaste von VoiceOver, kurz VO, ist die Kombination aus Ctrl und Option. Mit VO und U öffnest du den sogenannten Rotor, eine Liste aller Überschriften, Links und Bereiche der Seite. Am besten testest du mit Safari.
NVDA unter Windows
Lade NVDA kostenlos bei nvaccess.org herunter und installiere es. Gestartet wird es mit Strg, Alt und N. Die NVDA-Taste ist standardmäßig die Einfügen-Taste. Im Browser springst du mit H zur nächsten Überschrift, mit D zum nächsten Bereich, mit K zum nächsten Link und mit F zum nächsten Formularfeld. Einfügen und F7 öffnet eine Liste aller Elemente.
Auf dem Handy
Auf dem iPhone schaltest du VoiceOver unter Einstellungen, Bedienungshilfen, VoiceOver ein. Auf Android findest du TalkBack unter Einstellungen, Bedienungshilfen. Achtung, die Bedienung ändert sich sofort. Ein Tippen wählt aus, erst ein Doppeltippen löst aus, und gescrollt wird mit zwei oder drei Fingern. Richte dir vorher einen Kurzbefehl zum Ausschalten ein.
Deine Website in fünf Minuten testen
Öffne deine Startseite, schalte den Screenreader ein und geh diese Punkte durch. Schau dabei ruhig weiter auf den Bildschirm, aber achte vor allem darauf, was du hörst.
- Seitentitel. Wird beim Laden ein sinnvoller Titel vorgelesen, der sagt, wo du bist?
- Überschriften. Spring nur über die Überschriften durch die Seite. Ergeben sie eine Gliederung, die den Inhalt verständlich zusammenfasst?
- Links. Öffne die Liste aller Links. Verstehst du jeden Link ohne Zusammenhang, oder steht dort fünfmal „Mehr erfahren“?
- Buttons. Hat jeder Button einen Namen? Ein Menü-Button sollte nicht nur „Schalter“ heißen. Mehr dazu im Beitrag aria-label richtig einsetzen.
- Bilder. Werden wichtige Bilder beschrieben, und werden dekorative übersprungen? Wird irgendwo ein Dateiname vorgelesen? Wie gute Beschreibungen aussehen, steht im Beitrag Alt-Texte für Bilder schreiben.
- Menü. Lässt sich das Menü öffnen, wird angesagt, ob es offen oder zu ist, und schließt es mit Escape?
- Formular. Wird bei jedem Feld vorgelesen, was einzutragen ist? Und wird eine Fehlermeldung angesagt, wenn du das Formular leer abschickst?
Wenn du nach fünf Minuten bei einem dieser Punkte gestolpert bist, hast du einen echten Fehler gefunden, der auch Besuchern mit Screenreader im Weg steht.
Häufige Probleme und was dahintersteckt
Die meisten Fehler, die bei so einem Test auffallen, haben einfache Ursachen:
- Kein Überblick über die Überschriften. Überschriften sind nur optisch groß, im Code aber normale Absätze. Oder es gibt sie, aber in falscher Reihenfolge.
- Viele „Schalter“ ohne Namen. Icons ohne aria-label oder Bilder in Buttons ohne Alt-Text.
- Dateinamen werden vorgelesen. Dem Bild fehlt das alt-Attribut komplett.
- Klickbare Elemente werden übersprungen. Sie sind im Code kein Link oder Button, sondern ein beliebiges Element mit Klick-Funktion.
- Ein Pop-up lässt sich nicht verlassen. Der Fokus bleibt hinter dem Pop-up auf der Seite oder ist darin gefangen, ohne dass Escape funktioniert.
- Cookie-Banner ohne Fokus. Das Banner erscheint, aber der Screenreader bekommt nichts davon mit und liest die Seite dahinter vor.
Fast alle diese Punkte lassen sich im Code mit wenig Aufwand beheben. Wichtig ist, dass jemand sie bemerkt.
Was ein eigener Test nicht leisten kann
Wer selten einen Screenreader nutzt, bedient ihn langsam und anders als jemand, der das jeden Tag tut. Manches, was dich irritiert, ist für geübte Nutzer kein Problem, und manches, was dir nicht auffällt, ist für sie sehr lästig. Für eine Website, die wirklich barrierefrei sein muss, gehört deshalb eine Prüfung durch Fachleute oder ein Test mit Menschen, die selbst einen Screenreader nutzen, dazu.
Für deine eigene Seite ist der Fünf-Minuten-Test trotzdem der beste Anfang. Er zeigt dir Fehler, die eine automatische Prüfung nicht findet. Zusammen mit dem Tastatur-Test und der Checkliste aus dem Beitrag Was eine barrierefreie Website ausmacht hast du einen guten Überblick.
Kurz zusammengefasst
Ein Screenreader liest Websites vor und macht sie über Überschriften, Links und Bereiche bedienbar. Zum Testen reichen NVDA unter Windows oder VoiceOver auf dem Mac und fünf Minuten Zeit. Achte auf Überschriften, Linktexte, Namen von Buttons, Alt-Texte, Menü und Formular.
Die Websites, die ich baue, prüfe ich vor dem Start mit axe auf die WCAG 2.2 in Stufe AA, im hellen und im dunklen Design. Ob dein Unternehmen nach dem Barrierefreiheitsstärkungsgesetz dazu verpflichtet ist, steht im Ratgeber zum BFSG.
Titelbild: Foto von Eddau über Wikimedia Commons, Lizenz CC0 (öffnet in neuem Tab).
