Voces de síntesis de voz y reproducción accesible en el navegador
Usa la síntesis de voz del navegador como mejora opcional y controlada por la persona, con texto legible y alternativas fiables.
Quieres la documentación estructurada de Plataforma?
Este artículo forma parte de la biblioteca editorial. Para pasos de configuración, material de referencia y actualizaciones continuas, entra en la sección de docs.
La síntesis de voz del navegador puede leer texto sin que la aplicación envíe un archivo de audio para cada frase. Es útil para apoyo a la lectura, aprendizaje de idiomas y avisos breves. Es una mejora opcional, no un reemplazo del texto ni de la tecnología de asistencia.
Consulta también validación de interacción accesible, preferencias de idioma y controles de preferencias multimedia.
Para qué sirve SpeechSynthesis
La API Web Speech expone un controlador SpeechSynthesis y objetos SpeechSynthesisUtterance. La página proporciona el texto y el navegador y el sistema operativo realizan la salida. Los botones de “Leer en voz alta” deben corresponder a texto visible y conservar ese texto cuando la voz falla.
La lista de voces puede estar vacía al principio. El evento voiceschanged indica que las opciones pueden estar listas o haber cambiado. El sistema operativo, el navegador, los idiomas instalados, la red y una vista web integrada influyen en las voces, sus nombres, la pronunciación y su disponibilidad. No prometas un inventario fijo ni uses esas opciones para identificar dispositivos.
La disponibilidad puede cambiar durante una sesión.
Una voz instalada no garantiza una pronunciación concreta.
El idioma del documento ayuda a elegir un valor inicial.
La persona debe poder cambiar esa elección.
Mantén el texto visible mientras se cargan las opciones.
Un menú vacío no debe bloquear la lectura normal.
Variación de disponibilidad de voces
El evento de cambio puede llegar más de una vez.
Conserva la selección solo si sigue siendo válida.
Explica con palabras sencillas cuando falta una voz.
No conviertas las opciones en un catálogo del dispositivo.
Una voz remota puede depender de la conexión.
Prueba también un idioma sin voz instalada.
La lectura no necesita un indicador de tiempo exacto.
Mantén los controles en una posición estable.
Si cambia el texto, detén la lectura o indícalo.
El texto visible sigue siendo la referencia.
No leas en secreto contenido que ya no se muestra.
Los avisos breves deben poder revisarse por escrito.
Una cola de lectura debe poder detenerse.
El botón de detener debe seguir disponible.
Los estados no deben desplazar los controles.
Documenta la política para contenido dinámico.
La voz no debe impedir enviar un formulario.
Controles de reproducción accesibles
Controles y alternativas
La lectura debe comenzar después de una acción clara. Ofrece pausa, reanudación, cancelación y repetición para textos largos; usa botones nativos, foco visible y nombres accesibles. Un estado breve como “Leyendo sección” puede anunciarse en una región viva sin repetir todo el párrafo. La misma acción debe funcionar con teclado y tecnología de asistencia.
Si no hay voz, llega tarde, desaparece o produce un error, conserva el texto y muestra un mensaje accionable. Cancela una lectura anterior antes de comenzar otra y limpia el estado cuando termina, se interrumpe o se desmonta el componente. La navegación no debe reiniciar la voz en silencio.
Privacidad y elección
La salida de voz no exige enumerar ni enviar todas las voces. No registres matrices completas, voiceURI ni tiempos de carga en analítica. Si una función usa un proveedor externo, explica qué texto sale del navegador y solicita la elección correspondiente. La preferencia para desactivar la lectura debe ser visible y reversible, sin ocultar el contenido.
Comprobación práctica
Prueba teclado, puntero y lector de pantalla con voces ausentes, retrasadas, reemplazadas y con idiomas sin soporte. Comprueba que el texto legible, el foco y los mensajes de estado siguen disponibles después de pausar, cancelar, navegar o repetir. Verifica que las etiquetas traducidas y el texto alternativo de la imagen sean naturales en español.
La revisión manual puede comparar la frase hablada con la visible. El retorno al texto debe ser inmediato y comprensible.
Registra solo resultados observables.
Repite la prueba después de cambiar el idioma.
Confirma que el contenido sigue enfocable.
Fuentes públicas
Artículos Relacionados
Lleva BotBrowser de la investigación a producción
Usa estas guías para entender el modelo y después avanzar hacia validación multiplataforma, contextos aislados y despliegue de navegador preparado para escalar.