Raus mit der Sprache! Bestimme wie Screenreader Text vorlesen sollen
Zahlen, Abkürzungen und Gleichungen können für Screenreader-Nutzer:innen eine Herausforderung darstellen. Mit der CSS-Eigenschaft speak-as kannst du bestimmen, wie Text vorgelesen werden soll.
Foto: © Edmond Dantès / pexels.com
Buchstabieren oder nicht buchstabieren, das ist hier die Frage
Vor einigen Tagen habe ich einen Kunden aus der Bankenbranche beraten. Sie möchten ihre Website für Screenreader-Nutzer:innen optimieren. Eine Frage lautete: Wie können wir den Screenreader dazu bringen, eine Zahl immer Ziffer für Ziffer vorzulesen? Zum Beispiel eine Kontonummer mit 12 oder mehr Stellen?
In vielen Fällen sagen Screenreader statt der einzelnen Ziffern die ganze Zahl an. Beispielsweise wird 9100 als „neuntausend einhundert“ anstelle von „neun eins null null“ vorgelesen. Ähnliche Probleme können bei Abkürzungen oder Gleichungen auftreten. Es läuft alles auf die inhärente Heuristik des Screenreaders hinaus. Diese bestimmt, wie gewisse Abfolgen von Buchstaben und Satzzeichen vorgelesen werden.
Wäre es nicht großartig, wenn wir dem Screenreader einfach sagen könnten, wie er bestimmte Inhalte lesen soll? Die Antwort lautet: Ja, das geht! Aber die Browserunterstützung ist leider schlecht.
Die CSS-Eigenschaft speak-as
Das CSS Speech Module definiert die Eigenschaft speak-as. Sie bestimmt, auf welche Weise Text akustisch wiedergegeben wird, basierend auf einer vordefinierten Liste von Möglichkeiten:
- normal: Verwendet die sprachabhängigen Ausspracheregeln des Browsers (Standard).
- spell-out: Weist den Browser an, den Text zu buchstabieren (nützlich für Akronyme und Abkürzungen).
- digits: Zahlen werden Ziffer für Ziffer vorgelesen. Zum Beispiel: 9100 als „neun eins null null“.
- literal-punctuation: Satzzeichen (wie Semikolons, Klammern usw.) werden vorgelesen anstatt sie wie Pausen zu behandeln.
- no-punctuation: Satzzeichen werden ignoriert.
Mithilfe dieser CSS-Eigenschaft könnten wir etwa eine Klasse für Kontonummern wie folgt definieren:
.bank-account-number {
speak-as: digits;
}
Browser- und Screenreader-Unterstützung
In der Theorie klingt das alles großartig. Leider funktioniert es mit den meisten Browsern und Screenreadern nicht. Ich habe eine Demo auf Codepen zusammengestellt und die folgenden Szenarien getestet:
- NVDA 2021.3.1, Google Chrome 98.0.4758.82, Windows 10
- TalkBack, Firefox 97.1.0, Android 12
- VoiceOver, Safari 15, iOS 15.1
Von den dreien leistet nur VoiceOver tolle Arbeit und liest den Inhalt gemäß dem Wert der speak-as Eigenschaft vor. NVDA und TalkBack ignorieren es vollständig.
In Anbetracht der Tatsache, dass das CSS Speech Module vor über 10 Jahren geschrieben wurde, bin ich von der aktuellen Situation sehr enttäuscht. Ich hoffe, dass in Zukunft weitere Browser und Screenreader dieses Feature unterstützen werden!
Erstellt am