Propriedade CSS speak
Como usar a propriedade CSS speak para renderizar um elemento auralmente. Conheça a propriedade e veja seus valores.
Nota: A propriedade
speaké obsoleta. Nenhum navegador moderno a implementa, e os leitores de tela não a leem a partir do CSS. Trate esta página como referência para código legado e use técnicas reais de acessibilidade (HTML semântico, ARIA, o atributoaria-hidden) em vez disso.
A propriedade CSS speak define se — e como — o texto de um elemento é renderizado auralmente: ou seja, lido em voz alta por um sintetizador de fala em um agente de usuário aural (o tipo de ferramenta em que um usuário de leitor de tela depende). Ela faz parte de uma família de recursos CSS "aurais" / "de fala" que foram projetados para estilizar a saída de áudio da mesma forma que o CSS comum estiliza a saída visual.
Esta página explica o que a propriedade deveria fazer, todos os valores que aceita, por que nunca foi implementada e o que usar atualmente.
Por que esta propriedade existe (e por que falhou)
A ideia por trás do speak era simples: assim como display: none oculta um elemento de uma página visual, speak: none o ocultaria de uma página falada, enquanto spell-out forçaria um sintetizador a ler uma string um caractere por vez (útil para uma sigla como "URL" ou um número de série).
Na prática, a especificação mudou muito — os valores foram divididos entre o CSS 2.1 e o posterior CSS Speech Module — e nenhum navegador jamais a implementou. Os leitores de tela leem o DOM renderizado e a árvore de acessibilidade, não a sua folha de estilos, portanto nunca respeitaram o speak também. É por isso que está marcada como obsoleta: não tem efeito em lugar algum.
O que usar em vez disso
Como speak não faz nada, recorra a técnicas que a tecnologia assistiva realmente respeita:
- Ocultar conteúdo de todos (incluindo leitores de tela): use
display: noneou o atributo HTMLhidden. Este é o equivalente real ao antigospeak: none. - Ocultar conteúdo visualmente mas mantê-lo para leitores de tela: uma classe utilitária "visually hidden" / "sr-only" (posicionamento fora da tela), para que um botão com apenas ícone ainda possa anunciar um rótulo.
- Ocultar conteúdo decorativo apenas dos leitores de tela:
aria-hidden="true"no elemento. - Soletrar algo: não existe uma forma CSS confiável; use texto claro, um elemento
abbrou umaria-labelescrito da forma que você deseja que seja pronunciado.
Valores
A propriedade aceita seis valores de palavra-chave mais as duas palavras-chave CSS globais (initial, inherit). none, normal e spell-out vêm do CSS 2.1; auto, never e always vêm do CSS Speech Module.
| Valor Inicial | normal |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS2, CSS Speech Module |
| Sintaxe DOM | element.style.speak = "always"; |
Sintaxe
Sintaxe CSS speak
speak: auto | normal | spell-out | none | never | always | initial | inherit;Uma declaração mínima tem esta aparência (não terá efeito observável em nenhum navegador atual):
.acronym {
speak: spell-out;
}Referência de valores
| Valor | Descrição |
|---|---|
none | Impede que o elemento e seu conteúdo sejam renderizados auralmente. |
normal | Usa regras de pronúncia dependentes do idioma para renderizar um elemento e seus filhos. |
spell-out | Soletra o texto letra por letra, geralmente usado para siglas e abreviações. |
auto | Resolve para um valor computado de none quando display é none, caso contrário resolve para auto, que resulta em um valor usado de normal. |
never | Impede que o elemento seja renderizado auralmente. |
always | O elemento é renderizado auralmente. |
initial | Faz a propriedade usar seu valor padrão. |
inherit | Herda a propriedade do seu elemento pai. |
Compatibilidade com Navegadores
Nenhum navegador moderno implementa speak. A declaração é analisada, mas ignorada em todos os lugares, portanto nunca chega a um leitor de tela.
| Navegador | Suporte |
|---|---|
| Chrome | Não |
| Firefox | Não |
| Safari | Não |
| Edge | Não |
| Opera | Não |
Propriedades Relacionadas
display— a forma moderna e suportada de remover completamente um elemento da página (e da árvore de acessibilidade).content— conteúdo gerado que é anunciado pelos leitores de tela, portanto use com cuidado.cursor— outra propriedade de apresentação, esta com suporte completo.