La speakpropiedad en CSS es para especificar si un navegador debe hablar el contenido que lee, como a través de un lector de pantalla.
.module ( speak: never; speak-as: spell-out; )Valores para speak
auto: Siempre que el elemento no seadisplay: blocky seavisibility: visible, el texto se leerá de forma auditiva.never: el texto no se leerá de forma auditivaalways: el texto se leerá de forma auditiva, independientemente deldisplayvalor o los valores ancestrales despeak.
Valores para speak-as
Relacionado con speakcómo se leerá el texto:
normal: Toma laspeakconfiguración predeterminada del navegador .spell-out: Indica al navegador que deletree el contenido de una propiedad en lugar de pronunciar palabras completas.digits: Lee los números uno a la vez, como si 69 se leería "seis nueve". Lindo.literal-punctuation: Deletrea los signos de puntuación (como punto y coma) en lugar de tratarlos como pausas.no-punctuation: Omite completamente la puntuación.
¿Cómo "estilizas" tu discurso?
La speakpropiedad se trata menos de diseñar el habla de un lector de pantalla que de adaptar la experiencia de accesibilidad de un sitio cuando se utilizan lectores de pantalla.
Es tentador pensar en diseñar el habla en términos de género, tono, acento y otras formas en las que nosotros mismos hablamos en la vida real, pero ese no es el caso speak. Ese nivel de control es el que se está considerando actualmente voiceen el módulo de voz CSS.
Más información
- Hablemos de Speech CSS
- Especificaciones del módulo de voz CSS
- Uso de la API de Web Speech para simular la compatibilidad con CSS Speech
- Stack Overflow en la compatibilidad con Speak
Soporte del navegador
No hay soporte al momento de escribir este artículo. Parece que Opera solía admitir de forma nativa la propiedad con un -xv-prefijo antes de que el navegador se fusionara con el motor de renderizado Blink utilizado por Chrome.
MDN habla de speak-as en relación con los 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; )Firefox lo admite, ya que actualizo este artículo.