¿Cómo puedo crear un botón personalizado para Lenguaje sencillo?

En este artículo descubrirás cómo puedes integrar el lenguaje sencillo directamente en tu página

Usar un botón propio

Además del botón predefinido, también tienes la posibilidad de crear tu propio botón para la función «Lenguaje sencillo».

De este modo, podrás adaptar totalmente el diseño, la posición y la apariencia a tu sitio web y configurar el botón exactamente como lo necesites.

En principio, hay dos opciones de personalización: una personalización parcial o una personalización completa del botón.

Personalización parcial del botón

En la personalización parcial, tu propio botón sustituye al botón predeterminado. La función de lenguaje sencillo seguirá activándose automáticamente cuando los usuarios hagan clic en tu botón.

Puedes elegir entre dos opciones.

1. Botón personalizado sin información sobre herramientas ni icono

En esta opción, no se utilizan elementos predefinidos. Diseñarás el botón tú mismo desde cero y sustituirá por completo al botón actual.

No se importan ni las descripciones emergentes ni los iconos del sistema.

Así es como funciona:

Incorpora el archivo JavaScript proporcionado
No estás creando una etiqueta <easy-speech>
En su lugar, crea tu propio botón personalizado
Asigna el ID «easy-speech-custom» a tu botón

A continuación, solo se mostrará tu botón personalizado.

Cuando los usuarios hagan clic en el botón, se activará la traducción a lenguaje sencillo. Al volver a hacer clic, se volverá a mostrar la página normal.

2. Botón personalizado con información sobre herramientas e icono

En esta variante también puedes diseñar tú mismo el aspecto de tu botón por completo.

La diferencia es que se utilizan las descripciones emergentes y los iconos del sistema.

Estos indican, por ejemplo, si una traducción se ha realizado correctamente. Además , al pasar el cursor por encima del botón, aparece una ventana emergente con más información sobre la traducción.

Así es como funciona:

Incorpora el archivo JavaScript proporcionado
No estás creando una etiqueta <easy-speech>
En su lugar, crea tu propio botón personalizado
Asigna al botón el ID «easy-speech-custom-including-tooltip»

A continuación, aparecerá tu botón personalizado.

Al hacer clic en el botón, se activa el modo de lenguaje sencillo. Si vuelves a hacer clic, se volverá a mostrar la página normal.

Durante el uso, aparecen indicaciones de estado adicionales:

Al iniciar la traducción, aparece un icono de carga junto al botón
Una vez completada la traducción, ya sea con éxito o no, aparecerá un icono de estado correspondiente en el botón
Al pasar el cursor por encima del botón, aparece una ventana emergente con información sobre la traducción
Si la traducción tarda más de lo habitual o falla, también aparecerá una ventana emergente

Personalización completa del botón

En la personalización completa, no utilizas elementos prefabricados.

Tú mismo diseñas el botón por completo y controlas la activación del lenguaje sencillo mediante las funciones.

En esta variante, las descripciones emergentes y los iconos no se aplican automáticamente.

Así es como funciona:

Incorpora el archivo JavaScript proporcionado
No estás creando una etiqueta <easy-speech>
En su lugar, crea tu propio elemento HTML personalizado
Añade a tu código las funciones para activar el lenguaje sencillo

Para el control, se dispone de las siguientes funciones:

await EA.activateEasy()
Activa la traducción a lenguaje sencillo.
await EA.deactivateEasy()
Desactiva la versión simplificada y vuelve a mostrar la página original.

Hay otras funciones disponibles para consultar información sobre el estado del lenguaje sencillo o para controlar su activación.

Otras funciones disponibles

Además, hay varias funciones disponibles que te permiten comprobar el estado del lenguaje sencillo o controlar su uso.

Entre ellos se incluyen, entre otros:

EA.statusEasy() – devuelve el estado actual del lenguaje sencillo
EA.isEasyActive() – comprueba si el lenguaje sencillo está activo actualmente
EA.keepEasyActivated() – garantiza que el lenguaje sencillo permanezca activo incluso después de cambiar de página
EA.scriptIsLoaded() – comprueba si el script se ha cargado correctamente

Estas funciones te ayudarán a integrar «Lenguaje sencillo» en tu sitio web de forma flexible y a adaptarlo a tu propia interfaz.