speak-as

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die speak-as CSS-Eigenschaft wird verwendet, um festzulegen, wie HTML-Inhalte gesprochen werden. Die ein bis drei aufgezählten Schlüsselbegriffe bestimmen die Art und Weise, wie Elemente und Text von audiellen Technologien wie Screenreadern und digitalen Assistenten wiedergegeben werden.

Diese Eigenschaft gilt für alle Inhalte, einschließlich Pseudo-Elemente, mit Ausnahme der ::marker Pseudo-Elemente, die über eine @counter-style mit einem definierten speak-as-Deskriptor erstellt wurden, dieser hat Vorrang vor jedem geerbten speak-as-Eigenschaftswert.

Syntax

css
/* single value syntax */
speak-as: normal;
speak-as: spell-out;
speak-as: literal-punctuation;
speak-as: digits;
speak-as: no-punctuation;

/* multiple value syntax */
speak-as: spell-out literal-punctuation;
speak-as: spell-out no-punctuation;
speak-as: digits literal-punctuation;
speak-as: digits no-punctuation;
speak-as: spell-out digits literal-punctuation;
speak-as: spell-out digits no-punctuation;

Werte

normal

Normale Ausspracheregeln mit Satzzeichen, die durch Pausen ersetzt werden. Zum Beispiel würde "Hello, world!" als "Hello (Pause) world (Pause)" ausgesprochen. Dies ist der Standardwert.

spell-out

Inhalt wird buchstabiert. Zum Beispiel würde "role" als "r" "o" "l" "e" ausgesprochen.

literal-punctuation

Satzzeichen werden buchstäblich ausgesprochen. Zum Beispiel würde "Hello, world!" als "Hello Komma world Ausrufezeichen" ausgesprochen.

digits

Zahlen werden als einzelne Ziffern ausgesprochen. Zum Beispiel würde "31" als "drei eins" ausgesprochen.

no-punctuation

Inhalt wird normal ohne Satzzeichen ausgesprochen. Zum Beispiel würde "Hello, world!" als "Hello" "world" ausgesprochen.

Hinweis: Die Unterstützung der speak-as-Eigenschaft ist begrenzt und inkonsistent in verschiedenen assistiven Technologien, wie Screenreadern oder Sprachsynthesizern, implementiert. Um sicherzustellen, dass alle ausspracheabhängigen kritischen Informationen benutzerfreundlich und für ein breites Publikum zugänglich bleiben, verlassen Sie sich nicht ausschließlich auf diese CSS-Eigenschaft, um festzulegen, wie diese Informationen audiovisuell präsentiert werden.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertspecified value
Animationstypdiskret

Formaler Syntax

speak-as = 
normal |
spell-out || digits || [ literal-punctuation | no-punctuation ]

Beispiele

HTML

HTML
  <p class="normal">Hello, world! I'm 25.</p>
  <p class="spell-out">Hello, world! I'm 25.</p>
  <p class="literal-punctuation">Hello, world! I'm 25.</p>
  <p class="no-punctuation">Hello, world! I'm 25.</p>
  <p class="digits">Hello, world! I'm 25.</p>
  <p class="multi">Hello, world! I'm 25.</p>

CSS

CSS
  .normal {
    speak-as: normal;
  }

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

  .literal-punctuation {
    speak-as: literal-punctuation;
  }

  .no-punctuation {
    speak-as: no-punctuation;
  }

  .digits {
    speak-as: digits;
  }
 .multi {
    speak-as: literal-punctuation digits;
 }

Spezifikationen

Specification
CSS Speech Module Level 1
# speaking-props-speak-as

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
speak-as
Experimental
digits
Experimental
literal-punctuation
Experimental
no-punctuation
Experimental
normal
Experimental
spell-out
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch