speak

Die speak-Eigenschaft in CSS dient dazu, anzugeben, *ob* ein Browser den gelesenen Inhalt sprechen soll, z. B. über einen Screenreader.

.module {
  speak: never;
  speak-as: spell-out;
}

Werte für speak

• auto: Solange das Element nicht display: block ist und visibility: visible hat, wird Text akustisch vorgelesen.
• never: Text wird nicht akustisch vorgelesen
• always: Text wird akustisch vorgelesen, unabhängig vom display-Wert oder von den übergeordneten Werten von speak.

Werte für speak-as

Bezieht sich auf speak, da es darum geht, *wie* der Text vorgelesen wird.

• normal: Nutzt die Standardeinstellungen für speak des Browsers.
• spell-out: Weist den Browser an, die Inhalte von Eigenschaften buchstabieren, anstatt die ganzen Wörter auszusprechen.
• digits: Liest Zahlen einzeln vor, z. B. wird 69 als „sechs neun“ gelesen. Nett.
• literal-punctuation: Buchstabiert Satzzeichen (wie Semikolons) aus, anstatt sie als Pausen zu behandeln.
• no-punctuation: Überspringt Satzzeichen vollständig.

Wie „stylt“ man Sprache?

Die speak-Eigenschaft befasst sich weniger mit dem Styling der Sprache eines Screenreaders, sondern vielmehr mit der Anpassung des Erlebnisses der Barrierefreiheit einer Website, wenn Screenreader verwendet werden.

Es liegt nahe, das Styling von Sprache im Hinblick auf Geschlecht, Tonhöhe, Akzent und andere Arten, wie wir im wirklichen Leben sprechen, zu betrachten, aber das ist bei speak nicht der Fall. Dieses Maß an Kontrolle wird derzeit für voice im CSS Speech Module in Erwägung gezogen.

Weitere Informationen

• Lassen Sie uns über CSS für Sprache sprechen
• CSS Speech Module Spezifikation
• Verwendung der Web Speech API zur Simulation von CSS Speech-Unterstützung
• Stack Overflow zu Speak-Unterstützung

Browser-Unterstützung

Zum Zeitpunkt der Erstellung dieses Artikels gibt es keine Unterstützung. Es scheint, dass Opera die Eigenschaft früher nativ mit einem -xv- Präfix unterstützte, bevor der Browser mit der Blink-Rendering-Engine, die von Chrome verwendet wird, zusammengeführt wurde. Opera hat die Eigenschaft früher nativ unterstützt.

MDN spricht über speak-as in Bezug auf Zählerstile

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;    
}

Firefox unterstützt das, während ich diesen Artikel aktualisiere.