Sprachausgabe und CSS

15min

leicht

• Sprachausgabe

Es gibt doch die Medientypen @screen und @print, wieso gibt es kein @speech um darüber die Sprachausgabe zu regeln? Das gab es, wurde aber von den Browser-Herstellern nicht implementiert und deshalb aus dem Standard entfernt.

Trotzdem gibt es einige CSS-Eigenschaften im CSS Speech Module, die die Sprachausgabe mit gezielten Angaben zum Ausspracheverhalten von Screenreadern, z. B. für Betonungen, Pausieren oder Lautstärke (sog. Aural Style Sheets) steuern soll.

Andererseits ist gerade die Lautstärke ein Paradebeispiel dafür, dass dieser Wert nicht vom Autor, sondern von den nutzenden Personen eingestellt werden soll. Deshalb wird von den Browser- und Betriebs­system­herstellern mehr Wert auf die Auswahl von Benutzereinstellungen gelegt.

Das CSS Speech Module ist derzeit (2025) noch kein verabschiedeter Webstandard des W3C, einige dieser Eigenschaften sind bereits vor ihrer Einfürung als at risk gekennzeichnet. Interessant: Bereits 2002 gab es in der SELFHTML-Doku (Version 8) eine Seite dazu.

Von einer Verwendung kann heute aufgrund der mangelnden Browserunterstützung nur abgeraten werden. Es wird aber in Teilen schon im VoiceOver von iOS implementiert.

Einige dieser Eigenschaften finden Entsprechungen bei Web Speech.

Eigenschaften

speak

Browserunterstützung
caniuse.com

Die Eigenschaft speak bestimmt, ob der Text akustisch wiedergegeben werden soll oder nicht.

• speak :
  • auto
  • none: Ton aus und keine Sprechpause (Element wird quasi übergangen).
  • normal: Normale, sprachabhängige Aussprache.

speak-as

Browserunterstützung
caniuse.com

Die speak-as-Eigenschaft legt fest, auf welche Art und Weise der Text akustisch wiedergegeben wird, basierend auf einer vordefinierten Liste von Möglichkeiten. VoiceOver erkennt die folgenden speak-as-Werte:

normal

(Standardwert)Es wird die Standardaussprache verwendet.

digits

Liest Zahlen als einzelne Ziffern (z. B. "123" als "eins zwei drei").

literal-punctuation

Liest alle Satzzeichen laut vor.

spell-out

Buchstabiert jedes Zeichen einzeln.

Diese Werte können mit der Eigenschaft speak-as in CSS angewendet werden. Zum Beispiel:

Beispiel

code {
 speak-as: literal-punctuation;
}

Dies würde VoiceOver anweisen, alle Satzzeichen innerhalb von Elementen zu lesen.

pause

Die Eigenschaften pause-before und pause-after geben eine prosodische Grenze (Stille mit einer bestimmten Dauer) an, die vor (oder nach) der Sprachsynthese-Wiedergabe des Elements auftritt, oder, wenn ein cue-before (oder cue-after) angegeben ist, vor (oder nach) dem cue innerhalb des auralen Boxmodells.

• pause: Zusammenfassung von pause-before und pause-after
• pause-before:
  • Zeit: numerische Werte in Sekunden (s) oder Millisekunden (ms)
  • none | x-weak | weak | medium | strong | x-strong
• pause-after:
  • Zeit: numerische Werte in Sekunden (s) oder Millisekunden (ms)
  • none | x-weak | weak | medium | strong | x-strong

Die Eigenschaften rest-before und rest-after geben eine prosodische Grenze (Stille mit einer bestimmten Dauer) an, die vor (oder nach) der Sprachsynthese-Wiedergabe eines Elements innerhalb des auralen Boxmodells auftritt.

• rest: Zusammenfassung von rest-before und rest-after
• rest-before:
  • Zeit: numerische Werte in Sekunden (s) oder Millisekunden (ms)
  • none | x-weak | weak | medium | strong | x-strong
• rest-after:
  • Zeit: numerische Werte in Sekunden (s) oder Millisekunden (ms)
  • none | x-weak | weak | medium | strong | x-strong

cue

Die Eigenschaften cue-before und cue-after geben auditive Symbole (d.h. voraufgezeichnete/vorgenerierte Soundclips) an, die vor (oder nach) dem Element innerhalb des auralen Boxmodells abgespielt werden.

• cue: Zusammenfassung von cue-before und cue-after
• cue-before :
  • URI
  • none
  • Wert: Wert in Dezibel (mit Einheit dB)
• cue-after :
  • URI
  • none
  • Wert: Wert in Dezibel (mit Einheit dB)

Text mit Geräusch

<p style="cue-before:url(fanfare.mp3)">Freuen Sie sich!</p>

voice

Man kann die Art der Stimme beeinflussen. Dies entspricht etwa dem Beeinflussen von Schriftarten (font-family) bei visueller Darstellung.

Mit voice-family kann man die Art der Sprechstimme festlegen. Folgende generische Angaben werden vom W3-Konsortium z.B. vorgeschlagen:

• voice-family: Angabe von Geschlecht, Alter oder sogar gespeicherten Namen

gender

• male = Männerstimme
• female = Frauenstimme
• neutral

age

• old = alte Stimme
• young = junge Stimme
• child = Kinderstimme

Angabe einer Stimme

p.quote {
  voice-family: "Alex", male, old;
}

Diese CSS-Eigenschaft findet eine Entsprechung in der SpeechSynthesisVoice (MDN).

Da in den Vorlesefunktionen der Browser die Stimmen selbst ausgewählt werden können , ist es fraglich, ob und wie eine Festlegung z.B. in einem Dialog zwischen Mann und Frau hier notiert und stärker als die Benutzereinstellungen gewichtet werden.

• voice-volume: Lautstärke
  • silent: stumm
  • x-soft | soft | medium | loud | x-loud
  • <decibel>: Wert in Dezibel (mit Einheit dB)

at-risk

• voice-balance:
  • Wert: Wert von -100 bis 100
  • left | center | right | leftwards | rightwards: (Standardwert center)
• voice-duration:

• voice-rate:
• voice-pitch:
• voice-range:
• voice-stress: