🎉 Nueva herramienta: Lenguaje sencillo. Haz clic en el botón y pruébalo en directo

Eye-Able Adaptación manual a su propio sitio web

La imagen muestra un portátil con un programa informático abierto. Allí se puede ver el código informático.

Compartir post:

Si comprueba usted mismo la configuración, podrá adaptar Eye-Able -más allá del configurador- a su propio sitio web.
La imagen muestra un portátil con un programa informático abierto. Allí se puede ver el código informático.

Eye-Able Adaptación manual a su propio sitio web

Comparte esta entrada:

La imagen muestra un portátil con un programa informático abierto. Allí se puede ver el código informático.
Si comprueba usted mismo la configuración, podrá adaptar Eye-Able -más allá del configurador- a su propio sitio web.

Créditos de las fotos: Cualquier IP Ltd, Enlace al autor es https://anyip.io/ y Simplex - Diseño Web Sydney 

Con un autocontrol sobre la configuración, uno puede adaptar Eye-Able -más allá del configurador- a su propio sitio web. Las ventajas de una adaptación de este tipo se describen en el artículo "¿Cuáles son las ventajas de una adaptación inicial? Para realizar estos ajustes, es necesario tener conocimientos avanzados de HTML y CSS. Por ello, para cada sitio web ofrecemos la opción de una comprobación y optimización completas de Eye-Able . Sin embargo, algunas opciones de esta personalización son posibles en cualquier momento para los usuarios no gestionados de Eye-Able . A continuación se presentan los ajustes disponibles.

Nota: Las siguientes configuraciones son sólo un subconjunto de los parámetros disponibles en una optimización completa a través de Eye-Able .

Para ampliar la configuración de Eye-Able , deben añadirse pares clave-valor adicionales a la variable eyeAble_pluginConfig. Puede encontrar un ejemplo de configuración aquí(https://www.eye-able-cdn.com/example.js).

Además de integrar la configuración directamente en línea, también se pueden realizar cambios en la configuración de Eye-Able a través de una función independiente. Para poder realizar cambios en la configuración, se recomienda utilizar el método eyeAble_updateConfig():

<script type="text/javascript" >
    function eyeAble_updateConfig() {
        eyeAble_pluginConfig.topPosition = "200px"; //Verändere die Top-Position des Icons
        eyeAble_pluginConfig.maxMagnification = 10;
        if(eyeAble_pluginConfig.blacklistContrast){
            //append to the existing rules, otherwise they get overwritten
            eyeAble_pluginConfig.blacklistContrast += ".myClass";
        } else {
            eyeAble_pluginConfig.blacklistContrast = ".myClass";
        }
    }
</script>

Puede comentar los parámetros que no deben ser modificados.

Aumento:

Existen los siguientes parámetros para limitar el aumento:

  • maxMagnification: [int] Describe el aumento máximo (por defecto: 21)
  • maxMobileMagnification: [int] Describe el máximo aumento móvil (Por defecto: 3)

Posición:

Existen los siguientes parámetros para cambiar la posición del icono principal:

  • topPosition: [Cadena] Establece la posición superior del icono en el escritorio en % o px (Por defecto: "10%")
  • rightPosition: [Cadena] Establece la posición derecha del icono en el escritorio en px. Si sidePosition se establece como "izquierda", se establece la posición izquierda (por defecto: "10px").
  • mobileBottomPosition: [Cadena] Establece la posición inferior del icono móvil en % o px (Por defecto: "15%")
  • mobileRightPosition: [Cadena] Establece la posición derecha del icono móvil en px (Por defecto: "10px")
  • sidePosition: [Cadena] Establece el lado en el que aparece el icono "izquierda" o "derecha" (Por defecto: "derecha")

Apariencia:

Existen los siguientes parámetros para cambiar la apariencia:

  • mainIconAlt: [int] Cambia el icono principal entre tres variantes 0, 1 o 2 (Por defecto: 0)
  • iconSize: [int] Cambia el tamaño del icono en el escritorio, valores recomendados entre 50-70 píxeles (por defecto: 70px).
  • mobileIconSize: [int] Cambia el tamaño del icono móvil, valores recomendados entre 35-50 píxeles (por defecto: 50px).

Lector de pantalla:

Los siguientes parámetros se pueden utilizar para cambiar las clases CSS de ajuste:

  • customSrBlacklistCSS: [Cadena] Cambia la clase CSS de los elementos a excluir (Por defecto: eyeAble_SrSkip).
  • customSrStartCSS: [Cadena] Cambia la clase CSS para el nuevo elemento de inicio (Por defecto: eyeAble_SrStart).
  • customSrTextCSS: [Cadena] Cambia la clase CSS del bloque a leer (Por defecto: eyeAble_SrText )

Excluir elementos de las funciones:

Los siguientes parámetros pueden utilizarse para excluir determinados elementos de las funciones de Eye-Able . Esto es útil para el texto que se sale de su contenedor cuando se amplía, o para elementos cuyos colores no deben ser ajustados por el contraste o el modo nocturno. Los elementos pueden seleccionarse mediante selectores CSS nativos (más información aquí(https://www.w3schools.com/cssref/css_selectors.asp). Los selectores CSS múltiples se separan por comas. La excepción también se aplica a todos los hijos de los elementos seleccionados.

  • blacklistContrast: [Cadena] Excluir elementos del ajuste de color del modo contraste o noche.

Por ejemplo

Ejemplo de cómo excluir elementos del contraste
  • blacklistFontsize: [Cadena] Excluir elementos de la ampliación de la fuente.

Por ejemplo

Ejemplo de cómo excluir elementos de la ampliación

 

  • forceWhiteBackground: [Cadena] Fuerza un fondo blanco cuando se activa el modo nocturno o de contraste.

 

Simple para todos

¿Interés despertado? Estaremos encantados de ayudarle.

Con más de 25 funciones para la accesibilidad digital, Eye-Able también le ayuda a reducir sus barreras a largo plazo. De este modo, pone su información al alcance de todos y no excluye a ningún visitante; en resumen: accede a un nuevo grupo destinatario sin grandes volúmenes de marketing.

El icono muestra la figura de la accesibilidad

Consulta

Consulta no vinculante sobre la accesibilidad digital en general

El icono muestra la figura de la accesibilidad

Análisis

Discusión del posible potencial de optimización de su sitio web

El icono muestra la figura de la accesibilidad

Demostración en vivo

Presentación del software de asistencia directamente en su sitio web

Más contribuciones

Si puede ser un poco más: