Sprechen - CSS-Tricks

Anonim

Die speakEigenschaft in CSS dient zum Festlegen, ob ein Browser den gelesenen Inhalt sprechen soll, z. B. über einen Bildschirmleser.

.module ( speak: never; speak-as: spell-out; )

Werte für speak

  • auto: Solange das Element nicht vorhanden ist display: blockund ist visibility: visible, wird der Text akustisch gelesen.
  • never: Text wird nicht akustisch gelesen
  • always: Text wird akustisch gelesen, unabhängig von displayWert oder Ahnenwerten von speak.

Werte für speak-as

Bezogen auf speakdie Frage, wie der Text gelesen wird:

  • normal: Übernimmt die Standardeinstellungen des Browsers speak.
  • spell-out: Weist den Browser an, einen Eigenschafteninhalt zu buchstabieren, anstatt vollständige Wörter auszusprechen.
  • digits: Liest Zahlen nacheinander, als würde 69 "sechs neun" lauten. Nett.
  • literal-punctuation: Schreibt Interpunktionen (wie Semikolons) aus, anstatt sie wie Pausen zu behandeln.
  • no-punctuation: Überspringt die Interpunktion vollständig.

Wie "stylen" Sie Sprache?

In dieser speakEigenschaft geht es weniger darum, die Sprache eines Bildschirmlesegeräts zu gestalten, als vielmehr darum, die Zugänglichkeit einer Site bei Verwendung von Bildschirmlesegeräten zu verbessern.

Es ist verlockend, daran zu denken, Sprache in Bezug auf Geschlecht, Tonhöhe, Akzent und andere Arten, wie wir selbst im wirklichen Leben sprechen, zu stylen, aber das ist bei nicht der Fall speak. Diese Kontrollebene wird derzeit voiceim CSS-Sprachmodul berücksichtigt .

Mehr Informationen

  • Lassen Sie uns über Sprach-CSS sprechen
  • CSS Speech Module spec
  • Verwenden der Web Speech API zur Simulation der CSS-Sprachunterstützung
  • Stapelüberlauf bei Speak Support

Browser-Unterstützung

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

MDN spricht über Speak-as in Bezug auf Gegenstile:

 

    

  • One
    • 

  • Two
    • 

  • Three
    • 

  • Four
    • 

  • Five
    • 



@counter-style speak-as-example ( system: fixed; symbols:     ; suffix: " "; speak-as: numbers; ) .list ( list-style: speak-as-example; )

Firefox unterstützt dies, wenn ich diesen Artikel aktualisiere.