Tala - CSS-tricks

Anonim

Den speakegendom i CSS är för att specificera om en webbläsare bör tala innehållet läser, till exempel genom en skärmläsare.

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

Värden för speak

  • auto: Så länge elementet inte är display: blockoch är visibility: visiblekommer texten att läsas ljudligt.
  • never: texten kommer inte att läsas ljudligt
  • always: texten kommer att läsas ljudligt, oavsett displayvärde eller förfäder speak.

Värden för speak-as

Relaterat till speaknär det kommer in i hur texten kommer att läsas:

  • normal: Tar webbläsarens standardinställningar speak.
  • spell-out: Instruerar webbläsaren att stava ett innehållsinnehåll istället för att tala ut fullständiga ord.
  • digits: Läser nummer ett i taget, som 69 skulle läsas ”sex nio”. Trevlig.
  • literal-punctuation: Stavar punkteringar (som semikolon) snarare än att behandla dem som pauser.
  • no-punctuation: Hoppar helt över skiljetecken.

Hur "utformar du" tal?

Den speakegenskapen är mindre om styling tal en skärmläsare än den skräddarsy upplevelsen av en webbplats tillgänglighet när skärmläsare används.

Det är frestande att tänka på styling i termer av kön, tonhöjd, accent och andra sätt som vi själva talar i verkliga livet, men det är inte fallet med speak. Denna nivå av kontroll är vad som för närvarande övervägs voicei CSS Talmodul.

Mer information

  • Låt oss prata om tal CSS
  • CSS Speech Module spec
  • Använda Web Speech API för att simulera CSS Speech support
  • Stacköverflöde vid talstöd

Webbläsarstöd

Det finns inget stöd när detta skrivs. Det verkar som om Opera brukade stödja egendomen med ett -xv-prefix innan webbläsaren slogs samman med Blink-rendering-motorn som används av Chrome.

MDN talar om speak-as i förhållande till motstilar:

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

Firefox stöder det när jag uppdaterar den här artikeln.