Tale - CSS-tricks

Anonim

Den speakejendom i CSS er til angivelse hvis en browser skal tale det indhold den læser, såsom gennem en skærmlæser.

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

Værdier for speak

  • auto: Så længe elementet ikke er display: blockog er visibility: visible, læses teksten auralt.
  • never: tekst læses ikke auralt
  • always: tekst læses auralt, uanset displayværdi eller forfædres værdier for speak.

Værdier for speak-as

Relateret til, speaknår det kommer ind i, hvordan teksten læses:

  • normal: Tager browserens standardindstillinger speak.
  • spell-out: Pålægger browseren at stave et egenskabsindhold i stedet for at udtale fulde ord.
  • digits: Læser tal én ad gangen, ligesom 69 læses "seks ni". Pæn.
  • literal-punctuation: Gælder for punkteringer (som semikolon) i stedet for at behandle dem som pauser.
  • no-punctuation: Helt springer over tegnsætning.

Hvordan ”styler” du tale?

Den speakejendom er mindre om styling talen af en skærmlæser, end det er at skræddersy oplevelsen af et websteds tilgængelighed, når der anvendes skærmlæsere.

Det er fristende at tænke på styling i form af køn, tonehøjde, accent og andre måder, som vi selv taler i det virkelige liv, men det er ikke tilfældet med speak. Dette niveau af kontrol er det, der i øjeblikket overvejes voicei CSS Talemodul.

Mere information

  • Lad os tale om tale CSS
  • CSS Speech Module spec
  • Brug af Web Speech API til at simulere CSS Speech support
  • Stakoverløb ved taleopkald

Browsersupport

Der er ingen støtte på dette tidspunkt. Det ser ud til, at Opera plejede at understøtte ejendommen oprindeligt med et -xv-præfiks, før browseren flettede med Blink-gengivelsesmotoren, der blev brugt af Chrome.

MDN taler om speak-as i forhold til counter styles:

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

Firefox understøtter det, da jeg opdaterer denne artikel.