Falar - CSS-Tricks

Anonim

A speakpropriedade em CSS serve para especificar se um navegador deve falar o conteúdo que lê, como por meio de um leitor de tela.

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

Valores para speak

  • auto: Enquanto o elemento não display: blockfor e for visibility: visible, o texto será lido auditivamente.
  • never: o texto não será lido auditivamente
  • always: o texto será lido auditivamente, independentemente do displayvalor ou dos valores ancestrais de speak.

Valores para speak-as

Relacionado à speakforma como o texto será lido:

  • normal: Obtém as speakconfigurações padrão do navegador .
  • spell-out: Instrui o navegador a soletrar um conteúdo de propriedades em vez de falar palavras inteiras.
  • digits: Lê um número de cada vez, como 69 seria “seis nove”. Legal.
  • literal-punctuation: Soletra pontuações (como ponto e vírgula) em vez de tratá-los como pausas.
  • no-punctuation: Pula totalmente a pontuação.

Como você “estiliza” a fala?

A speakpropriedade tem menos a ver com estilizar a fala de um leitor de tela do que com a adaptação da experiência de acessibilidade de um site quando os leitores de tela estão sendo usados.

É tentador pensar em estilizar a fala em termos de gênero, tom, sotaque e outras maneiras como falamos na vida real, mas esse não é o caso speak. Esse nível de controle é o que está sendo considerado voiceno Módulo de Fala CSS.

Mais Informações

  • Vamos falar sobre discurso CSS
  • Especificações do módulo de fala CSS
  • Usando a API Web Speech para simular o suporte a CSS Speech
  • Stack Overflow no Speak Support

Suporte para navegador

Não há suporte no momento da redação deste artigo. Parece que o Opera costumava oferecer suporte nativo à propriedade com um -xv-prefixo antes de o navegador se fundir com o mecanismo de renderização Blink usado pelo Chrome.

MDN fala sobre speak-as em relação a estilos de contador:

 

    

  • One
    • 

  • Two
    • 

  • Three
    • 

  • Four
    • 

  • Five
    • 



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

O Firefox oferece suporte para isso, pois eu atualizo este artigo.