Explicamos cinco métodos para lograr la 'lectura en voz alta' en sitios web

2024/11/28

En la actualidad, se exige que todos los sitios web sean accesibles.‘Lectura de sitios web’Las funciones y herramientas que implementan esto son elementos esenciales para la accesibilidad y la mejora de la experiencia del usuario.

La función de lectura del sitio no solo ayuda a diversos usuarios, incluyendo aquellos con discapacidades visuales, a acceder a la información en la web de manera equitativa, sino que también se destaca como una herramienta que apoya el ‘trabajo en multitarea’.

Existen cinco métodos representativos para la lectura de sitios web, que se enumeran a continuación.

Método ① Utilizar la función de lectura del navegador
Método ② Usar un lector de pantalla
Método ③ Integración de plugins
Método ④ Uso de API de síntesis de voz.
Método ⑤ Proporcionar contenido de video y audio

En este artículo, presentaremos cinco métodos representativos de lectura de sitios web, explicando sus características, métodos de implementación y los desafíos que presenta la funcionalidad de lectura.

Cinco métodos para leer un sitio web.

Primero, presentaremos cinco métodos para implementar la lectura de sitios web. La siguiente tabla resume y compara cada método.

◆ Tabla comparativa de cinco métodos de lectura de sitios web

Método	Características	Ámbito de aplicación	Ventajas	Desventajas
① Usar la función de lectura en voz alta del navegador	Incorporado como una función estándar en los navegadores web y disponible en la configuración	En todo el navegador	・Sin costo de implementacióndisponible en。 • Puede activarse fácilmente desde la configuración del navegador, permitiendo que los usuarios lo usen de inmediato.	A menudo se lee en una voz monótona. ・Solo disponible en navegadores o sistemas operativos específicos
Método ② Usar un lector de pantalla	Es una tecnología de asistencia diseñada principalmente para personas con discapacidades visuales, disponible en todo el sistema operativo y aplicaciones.	En todo el sistema y aplicaciones en general.	• Apoya la accesibilidad en generalDisponibles en todo el sistema. hay opciones que son compatibles con la salida en Braille.	• Requiere configuración e instalación, lo que puede parecer complicado para personas sin discapacidades. ・También existen herramientas de pago
③ Integración de plugins	Le permite leer contenido específico al incrustar código de script en el sitio web.	Sitios o páginas web específicas.	・una forma optimizada para contenido específico.que funcionan en · Personalizable	・La implementación puede ser laboriosa. La variedad de funciones depende de los plugins implementados.
④ Uso de API de síntesis de voz	Puede generar voces de alta calidad y más naturales, utilizables en cualquier situación que requiera voz.	Desde sitios web y aplicaciones hasta dispositivos IoT, producción de contenido y chatbots, abarca una amplia gama.	・ Personalización avanzada yEs posible generar voz natural • Excelente compatibilidad multilingüe	・ Orientado a desarrolladores con altas barreras técnicas para su implementación. ・Con costos de operación
⑤ Provisión de contenido de video y audio.	Proporciona información de lectura en voz alta como contenido de audio y video	Limitado a contenido específico (audio y video)	No solo voz,Utilizar elementos visuales y músicaSe puede hacer. • Posibilidad de centrarse en contenido específico	・La creación de contenido es laboriosa. • Falta de capacidad en tiempo real

Principalmente, la lectura en voz alta de los sitios web se logra a través de estos métodos. En lo que respecta a ③④⑤, es posible proporcionar una lectura en voz alta de alta precisión, sin embargo,Los operadores del sitio web deben realizar el desarrollo y la producciónEs necesario.

Por otro lado, para los métodos ① y ②, no hay necesidad de desarrollo especial en el lado del sitio web, ya que se utiliza la configuración y herramienta del navegador del usuario para la lectura. Sin embargo, para que la función de lectura del navegador y el lector de pantalla funcionen correctamente,La estructura del sitio web y el método de codificación HTML deben cumplir con los estándares de accesibilidad como WCAG.Es necesario.

A continuación, explicaré detalladamente cómo implementar cada método, incluidos los pasos para su introducción.

Método ① Utilizar la función de lectura del navegador

Utiliza la función de lectura que viene de serie en navegadores web como "Google Chrome" o "Safari".Sin necesidad de instalar aplicaciones o software especiales.Se puede utilizar y solo requiere configuraciones simples por parte del usuario para convertir texto en audio y proporcionárselo. Es conveniente no solo para personas con discapacidad visual, sino también para personas sanas que desean obtener información mientras realizan otras tareas.

Sin embargo, solo funciona en el navegador,No funciona a nivel de todo el sistema como un lector de pantallas, por lo que sus funciones son limitadas para personas con discapacidades visuales.Se podría decir que

◆ Servicios Representativos

・Microsoft Edge
・Safari(Mac)
・Google Chrome

Método de implementación

Activa la función de lectura en voz alta desde el menú de configuración de cada navegador. Si se utiliza a través de una extensión adicional del navegador, se puede usar instalando la extensión en el navegador y habilitando la función. Por ejemplo, en Chrome,‘Read Aloud’Se ofrecen extensiones como estas.

Método ② Usar un lector de pantalla

El lector de pantalla es una tecnología de asistencia diseñada para personas con discapacidad visual que convierte la información de la pantalla en voz o braille. No se limita a los navegadores web,Utilizable en todo el sistema, como en el sistema operativo y aplicacioneses una de sus características.

◆ Herramientas representativas

NVDA Versión en japonés
Narrador
PC-Talker
JAWS 2024 versión en japonés
ZoomText 2024 Versión en japonés

Método de implementación

Los métodos de implementación varían según la herramienta, pero generalmente se descargan desde el sitio oficial o se instalan después de la compra de una licencia. Además,Los teléfonos inteligentes vienen con lectores de pantalla preinstalados.En el caso de iOS, desde el menú de accesibilidad en la configuración, puede activarse.‘VoiceOver’con el botón de encendido, en el caso de Android"TalkBack"Activando esto, se habilita la función de lectura.

En cuanto a los lectores de pantalla,Para más información, consulte el artículo a continuación junto con este.。

Artículos relacionados:Explicamos cómo utilizar lectores de pantalla y cinco herramientas representativas

Método ③ Integración de plugins

Los plugins permiten agregar fácilmente la funcionalidad de lectura a un sitio web.se proporciona una función de lectura especializada para contenidos específicos (por ejemplo: descripciones de productos, artículos, preguntas frecuentes, etc.).Por lo tanto, permite a los administradores personalizar las funciones de manera flexible según los objetivos del sitio. Además, al personalizar la configuración, por ejemplo,Con especificaciones para el rango de lectura y botones de inicio y detención de audio, se ofrece una interfaz intuitiva y fácil de usar.también es posible ofrecerlo a los usuarios.

◆ Plugins representativos

UniWeb
ReadSpeaker
BrowseAloud

Método de implementación

Como método de implementación general, se selecciona el plugin adecuado en el sitio de servicio,se puede implementar simplemente insertando el código de script del proveedor en la cabecera HTML.。Es posible personalizar el rango de texto y el diseño de botones en la interfaz de administración.

Método ④ Uso de API de síntesis de voz.

La API de síntesis de voz convierte el texto ingresado ense convierte en voz natural en tiempo realse utiliza como base tecnológica para integrar funciones avanzadas de lectura en sitios web y aplicaciones.Permite ajustes de voz según la emoción y el contexto, y también ofrece excelente compatibilidad multilingüees una de sus características.

◆ Servicios Representativos

Google Cloud Text-to-Speech
Amazon Polly
IBM Watson Text-to-Speech

Método de implementación

Primero, cree una cuenta con proveedores de API como Google Cloud, Amazon AWS e IBM Watson, y habilite la API. Incorpore la clave API obtenida en su entorno de desarrollo y implemente un programa que envíe texto a la API para reproducir los datos de audio generados.

Método ⑤ Proporcionar contenido de video y audio

Es un método para proporcionar información del sitio en audio como contenido de video o audio.Al combinarlo con elementos visuales, se puede comunicar la información de manera multidimensional.La creación de contenido, como la edición de videos, toma tiempo y esfuerzo, pero con la edición adecuada,La forma más confiable para comunicar lo que se desea de manera comprensible.también.

Método de implementación

Primero, crea el contenido utilizando software de grabación de audio o herramientas de edición de video. Luego sube los archivos al servidor,ya sea embedding etiquetas directamente en el sitio web o subiendo a YouTube o SoundCloud y obteniendo un código de inserción para integrarlo en el sitio.también. Proporcionar subtítulos y transcripciones para mejorar la accesibilidad sería aún mejor.

Todos estos métodos ayudan a mejorar la conveniencia del usuario y asegurar la accesibilidad, pero al implementarlos y operarlos,algunos puntos a tener en cuenta y desafíos.existen. A continuación, se discutirán los problemas que enfrenta la función de lectura de sitios web.

Cinco desafíos de la función de lectura del sitio web

La función de lectura es útil para una variedad de usuarios, pero también presenta algunos desafíos. Aquí discutiremos cinco desafíos representativos.

Desafío ① Limitaciones en la calidad y naturalidad de la voz

En los últimos años, el uso de tecnologías de síntesis avanzadas como la voz de IA ha permitido generar voces más naturales, pero la mayoría de las funciones de lectura en voz alta de los navegadores que se utilizan comúnmente y los lectores de pantalla sonVoz monótona y mecánica..

Si los usuarios buscan calidad de audio, la voz monótona o la entonación no natural pueden ser un problema, especialmente,Si el contenido a leer es extenso, puede ser agotador.Esto presenta un problema.

Problema ② Hay caracteres o símbolos que no se reconocen correctamente.

algunos caracteres especiales, símbolos y acrónimos pueden no leerse correctamente.puede haber casos en los que este problema no solo dificulte la comprensión del contenido por parte del usuario, sino que también,Causa de la disminución de la accesibilidad en todo el sitio.también.

Por ejemplo, en representaciones especializadas como código de programación, fórmulas o fórmulas químicas, puede no realizarse la lectura que se pretendía, lo que puede confundir a los usuarios. Además, las abreviaturas (como NASA o HTML) pueden no pronunciarse correctamente, lo que puede dificultar la comprensión de su significado por parte del usuario.

Además, si se utilizan con frecuencia símbolos decorativos o emojis, el motor de lectura puede leer en voz alta todos los nombres de emoji, lo que da lugar a resultados redundantes y confusos (por ejemplo, leer todos los 😊 como "emoji de cara sonriente").

Problema ③ Dificultades en la compatibilidad multilingüe.

En un sitio web multilingüe, si no se realiza un cambio de idioma adecuado,Pronunciación incorrecta o lectura antinatural.puede ocurrir. Además, si falta la configuración adecuada del código de idioma (como lang='en', lang='ja', etc.), el motor de voz no funcionará correctamente.

Los aspectos que requieren la correcta configuración de los códigos de idioma y el cambio de motores de síntesis de voz son,El soporte es técnicamente complejo y aumenta la carga de trabajo operativa.Se ha convertido en un desafío común en sitios web multilingües.

Desafío ④ Soporte para contenido dinámico

contenidos dinámicos como secciones de comentarios, chat, ventanas emergentes,es muy útil y efectivo en términos de persuasión porque puede actualizar la información en tiempo real.No es muy compatible con las funciones de lectura del sitio.

En muchos casos, la función de lectura y los lectores de pantalla no reconocen la información añadida en tiempo real,No se pueden comunicar eficazmente a los usuarios, como 'no leer hasta el final' o 'superposición en la lectura'.existe dicho desafío. Como resultado, puede suceder que se ignoren nuevas informaciones o que los usuarios escuchen de nuevo información antigua en momentos no intencionados.

Desafío ⑤ Costos y carga de la adaptación a la accesibilidad.

Para que la función de lectura funcione correctamente, es necesario queEs esencial que el HTML y la estructura del sitio web estén escritos correctamente de acuerdo con los estándares de accesibilidad.Es necesario. Sin embargo, en la práctica, hay numerosos casos en los que la función de lectura no funciona como se esperaba debido a una codificación HTML inexacta, falta de texto alternativo, y atributos ARIA no configurados.

Para resolver este tipo de problemas, será necesario realizar modificaciones en el sitio web, pero eso requiereCostos monetarios y de tiempoEs un costo, especialmentePara los pequeños negocios con restricciones presupuestarias y de personal, esta carga es significativa, y la accesibilidad se deja a un lado.Esto es bastante común en la actualidad.

Estos problemas son inevitables al introducir y operar funciones de lectura en voz alta. Sin embargo,La evolución reciente de la tecnología de IA ha ampliado las posibilidades de resolver estos problemas.A continuación, explicaremos la evolución de la función de lectura del sitio web impulsada por la tecnología de IA.

La evolución de la función de lectura de sitios web gracias a la tecnología de IA.

En los últimos años, los avances en la tecnología de IA han permitido un progreso drástico en la funcionalidad de lectura de sitios.Un modelo de síntesis de voz que utiliza deep learning (una técnica que aprende características automáticamente a partir de grandes volúmenes de datos).genera voz a partir de texto aplicando una entonación basada en emociones y contexto,Genera voces más naturales y humanas en lugar de la lectura mecánica tradicional.。

Además, la IAEntender el contexto del texto y las relaciones entre las palabras.y, por ejemplo, se utiliza un tono formal en artículos de noticias y voces emotivas en contenido narrativo, logrando así lecturas adecuadas al contenido.

Además, el soporte multilingüe también ha evolucionado gracias a la IA,tecnologías de síntesis de voz como Google Cloud TTS soportan decenas de idiomas.y permite cambios fluidos entre diferentes idiomas. Por ejemplo, en una página que mezcla inglés y japonés,se lee automáticamente el texto con la pronunciación e entonación adecuadas para cada idioma, o se puede traducir el texto mientras se lee en el idioma deseado.se ha vuelto posible, entre otros.

Estas tecnologías,Al integrarse con métodos existentes de lectura como navegadores, lectores de pantalla y plugins, se mejora significativamente cada una de las funciones.y puede mejorar significativamente la experiencia del usuario.

Referencia:Última tecnología de síntesis de voz y su aplicación: Las voces futuras creadas por IA. / ¡Última tecnología de síntesis de voz de 2024! Evolución y casos de uso sorprendentes.（Reinforz Insight）、Se logró la síntesis de voz multilingüe sin alterar la calidad de la voz del hablante, integrando tecnología de síntesis de voz crosslingual en la solución de síntesis de voz "FutureVoice Crayon", comenzando así la primera oferta comercial en el país.（NTT Techno Cross）

Soporte eficiente de lectura del sitio realizado por Uniwave

En este artículo, presentamos diversas formas de implementar la función de lectura en sitios web, así como los que ofrecemos.Herramienta de accesibilidad 'UniWeb'es una herramienta poderosa para lograr la accesibilidad en sitios web en un corto período.

Debido a que es una herramienta de complemento,Simplemente insertando una línea de código en el sitio webSe pueden implementar fácilmente funciones específicas de mejora de la accesibilidad, como la lectura en voz alta, ajuste de colores y cambio de tamaño de fuente.

La función de lectura en voz alta del sitio de UniWeb tieneAdemás de la función general de "lector de pantalla", existe también la función de "lector parcial".A continuación se presenta una función de lector parcial que se activa con un solo clic, permitiendo también cambiar la velocidad de lectura.

Al hacer clic en la parte que desea que se lea, solo esa sección se leerá, lo que también es útil para obtener información durante tareas multitarea además de su uso en accesibilidad.

◆ "Lector parcial" de Uniweb

Normalmente, para asegurar que la función de lectura del sitio web funcione correctamente, es necesario verificar los problemas en cada página utilizando un lector de pantalla y corregir manualmente el HTML y la estructura, pero utilizando UniWeb,Es posible analizar automáticamente todo el sitio y optimizar la estructura identificando problemas de manera eficiente..

Uniweb es una herramienta confiable y rentable para la adaptación a la accesibilidad web, incluida la lectura en voz alta.El 'icono rosa' en la esquina inferior derecha de este artículoSi hace clic en, se mostrará el menú de accesibilidad de Uniweb, así que no dude en probar la funcionalidad.

Resumen

La función de lectura en voz alta del sitio web esDesempeña un papel importante en la mejora de la experiencia del usuario y en la adaptación a la accesibilidad.Este artículo ha presentado las características y métodos de implementación de cinco tipos de lectura en voz alta, y en el futuro, al considerar la función de lectura en voz alta,Es necesario elegir un método que se ajuste a los objetivos del sitio y al público objetivo, prestando suficiente atención a los problemas.

Además, para ser compatibles con las funciones del navegador y lectores de pantalla,Ajustar la estructura del sitio y la codificación HTML para cumplir con los estándares de accesibilidad.es importante. Esto permite que la función de lectura en voz alta funcione correctamente, proporcionando un entorno en el que todos los usuarios puedan acceder cómodamente al contenido.

Hoy en día, se requiere que todos los sitios web sean accesibles, y para que los usuarios con discapacidades visuales o los ancianos puedan utilizar el sitio sin inconvenientes, la función de lectura en voz alta del sitio debe ser un área de creciente atención en el futuro.

Si se busca una accesibilidad eficiente y efectiva, considerar el uso de soluciones como Uniwave también podría ser una opción.