Propiedad CSS speak
Cómo usar la propiedad CSS speak para que el elemento se renderice de forma auditiva. Descubre la propiedad y sus valores.
Nota: La propiedad
speakes obsoleta. Ningún navegador convencional la implementa y los lectores de pantalla no la leen desde CSS. Trata esta página como referencia para código heredado y utiliza técnicas de accesibilidad reales (HTML semántico, ARIA, el atributoaria-hidden) en su lugar.
La propiedad CSS speak define si — y cómo — el texto de un elemento se renderiza de forma auditiva: es decir, leído en voz alta por un sintetizador de voz en un agente de usuario auditivo (el tipo de herramienta en la que confía un usuario de lector de pantalla). Pertenece a una familia de características CSS "auditivas" / "de voz" que pretendían dar estilo a la salida de audio de la misma manera que el CSS ordinario da estilo a la salida visual.
Esta página explica lo que se suponía que debía hacer la propiedad, cada valor que acepta, por qué nunca se publicó y qué usar hoy en día.
Por qué existe esta propiedad (y por qué falló)
La idea detrás de speak era ordenada: al igual que display: none oculta un elemento de una página visual, speak: none lo ocultaría de una página hablada, mientras que spell-out obligaría a un sintetizador a leer una cadena carácter por carácter (útil para un acrónimo como "URL" o un número de serie).
En la práctica la especificación fue cambiando — los valores se dividieron entre CSS 2.1 y el posterior CSS Speech Module — y ningún navegador lo implementó jamás. Los lectores de pantalla leen el DOM renderizado y el árbol de accesibilidad, no tu hoja de estilos, por lo que tampoco respetaron speak. Por eso está marcada como obsoleta: no tiene efecto en ningún lugar.
Qué usar en su lugar
Dado que speak no hace nada, recurre a técnicas que la tecnología asistiva realmente respeta:
- Ocultar contenido de todos (incluidos los lectores de pantalla): usa
display: noneo el atributo HTMLhidden. Este es el equivalente en el mundo real del antiguospeak: none. - Ocultar contenido visualmente pero mantenerlo para los lectores de pantalla: una clase de utilidad "visually hidden" / "sr-only" (posicionamiento fuera de la pantalla), para que un botón con solo icono pueda seguir anunciando una etiqueta.
- Ocultar contenido decorativo solo de los lectores de pantalla:
aria-hidden="true"en el elemento. - Deletrear algo: no existe una forma CSS confiable; usa texto claro, un elemento
abbro unaria-labelescrito tal como quieres que se pronuncie.
Valores
La propiedad acepta seis valores de palabra clave más las dos palabras clave CSS globales (initial, inherit). none, normal y spell-out provienen de CSS 2.1; auto, never y always provienen del CSS Speech Module.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredada | Sí. |
| Animable | No. |
| Versión | CSS2, CSS Speech Module |
| Sintaxis DOM | element.style.speak = "always"; |
Sintaxis
Sintaxis CSS de speak
speak: auto | normal | spell-out | none | never | always | initial | inherit;Una declaración mínima tiene este aspecto (no tendrá ningún efecto observable en ningún navegador actual):
.acronym {
speak: spell-out;
}Referencia de valores
| Valor | Descripción |
|---|---|
none | Impide que el elemento y su contenido se rendericen de forma auditiva. |
normal | Utiliza reglas de pronunciación dependientes del idioma para renderizar un elemento y sus hijos. |
spell-out | Deletrea el texto letra por letra, utilizado típicamente para acrónimos y abreviaturas. |
auto | Se resuelve a un valor calculado de none cuando display es none; en caso contrario, se resuelve a auto, que produce un valor utilizado de normal. |
never | Impide que el elemento se renderice de forma auditiva. |
always | El elemento se renderiza de forma auditiva. |
initial | Hace que la propiedad use su valor predeterminado. |
inherit | Hereda la propiedad de su elemento padre. |
Compatibilidad con navegadores
Ningún navegador convencional implementa speak. La declaración se analiza sintácticamente pero se ignora en todas partes, por lo que nunca llega a un lector de pantalla.
| Navegador | Soporte |
|---|---|
| Chrome | No |
| Firefox | No |
| Safari | No |
| Edge | No |
| Opera | No |
Propiedades relacionadas
display— la forma moderna y compatible de eliminar un elemento de la página (y del árbol de accesibilidad) por completo.content— contenido generado que sí es anunciado por los lectores de pantalla, por lo que debe usarse con cuidado.cursor— otra propiedad de presentación, esta con soporte completo.