Spreken - CSS-trucs

Anonim

De speakeigenschap in CSS is om aan te geven of een browser de gelezen inhoud moet uitspreken, bijvoorbeeld via een schermlezer.

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

Waarden voor speak

  • auto: Zolang het element dat niet is display: blocken is visibility: visible, wordt tekst auditief gelezen.
  • never: tekst wordt niet auditief gelezen
  • always: tekst wordt auditief gelezen, ongeacht de displaywaarde of voorouderwaarden van speak.

Waarden voor speak-as

Gerelateerd aan speakhoe de tekst zal worden gelezen:

  • normal: Neemt de standaardinstellingen van de browser speak.
  • spell-out: Instrueert de browser om de inhoud van een eigenschap te spellen in plaats van volledige woorden uit te spreken.
  • digits: Leest nummers één voor één, alsof 69 zou worden gelezen als "zes negen". Leuk.
  • literal-punctuation: Spelt leestekens (zoals puntkomma's) in plaats van ze als pauzes te behandelen.
  • no-punctuation: Slaat interpunctie volledig over.

Hoe "style" je spraak?

De speakeigenschap gaat niet zozeer over het opmaken van de spraak van een schermlezer, maar over het afstemmen van de ervaring van de toegankelijkheid van een site wanneer schermlezers worden gebruikt.

Het is verleidelijk om te denken aan stijltaal in termen van geslacht, toonhoogte, accent en andere manieren waarop we zelf in het echte leven spreken, maar dat is niet het geval speak. Dat niveau van controle wordt momenteel overwogen voicein de CSS Speech Module.

Meer informatie

  • Laten we het hebben over spraak-CSS
  • CSS Speech Module spec
  • De Web Speech API gebruiken om CSS-spraakondersteuning te simuleren
  • Stack Overflow op Speak Support

Browser-ondersteuning

Op het moment van schrijven is er geen ondersteuning. Het lijkt erop dat Opera de eigenschap standaard ondersteunde met een -xv-voorvoegsel voordat de browser samenging met de Blink-rendering-engine die door Chrome werd gebruikt.

MDN heeft het over speak-as in relatie tot tegenstijlen:

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

Firefox ondersteunt dat, aangezien ik dit artikel bijwerk.