Escrito por Chris Schmidt el 20 de diciembre de 2022

Eye-Able Adaptar manualmente a su propio sitio web

Accessibility

Adapte manualmente Eye-Able a su propio sitio web.Laptopbildschirm auf dem Programmiersprache zu sehen ist.

Gracias al control que usted mismo ejerce sobre la configuración, puede adaptar Eye-Able, más allá del configurador, a su propio sitio web.

Créditos de las fotos : Any IP Ltd, Enlace al autor es Simplex - Diseño Web en Sídney 

En caso de que se desee un control propio sobre la configuración, es posible adaptar Eye-Able —más allá del configurador— a cada sitio web. Las ventajas de esta personalización se describen en el artículo "¿Cuáles son las ventajas de una personalización inicial?". Para realizar estas personalizaciones, es necesario un conocimiento avanzado de HTML y CSS. Por lo tanto, para cada sitio web ofrecemos la opción de realizar pruebas y optimizar completamente Eye-Able. Sin embargo, algunas opciones de esta personalización están disponibles en cualquier momento para los usuarios no gestionados de Eye-Able. Las opciones disponibles se presentan a continuación.

Nota: Las siguientes configuraciones son solo 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, se deben agregar 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 la integración de la configuración directamente en línea, los cambios en la configuración de Eye-Able también se pueden realizar a través de una función separada. Para poder realizar cambios en la configuración usted mismo, el método a través de método eyeAble_updateConfig() Por lo tanto, se recomienda:

<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>

Los parámetros que no deban modificarse pueden comentarse.

Aumento:

Los siguientes parámetros existen para limitar la magnificación:

  • aumento máximo : [int] Describe el aumento máximo (predeterminado: 21)

  • MaxMobileMagnification : [int] Describe el aumento móvil máximo (predeterminado: 3).

Posición:

Los siguientes parámetros permiten cambiar la posición del icono principal:

  • Posición superior: [String] Establece la posición superior del icono en el escritorio en % o px (Valor predeterminado: "10%")

  • Posición derecha: [String] Establece la posición derecha del icono en el escritorio en píxeles. Si sidePosition se establece en "left", se establecerá la posición izquierda (predeterminado: "10px").

  • posición inferior del móvil : [String] Establece la posición inferior del icono móvil en % o px (predeterminado: "15%").

  • Posición correcta del móvil : [String] Establece la posición correcta del icono móvil en px (predeterminado: "10px").

  • Posición lateral : [Cadena] Establece el lado en el que aparece el icono: "izquierda" o "derecha" (Predeterminado: "derecha").

Apariencia:

Los siguientes parámetros permiten cambiar la apariencia:

  • Icono principal alternativo: [int] Cambia el icono principal entre tres variantes: 0, 1 o 2 (predeterminado: 0).

  • Tamaño del icono: [int] Cambia el tamaño del icono en el escritorio, valores recomendados entre 50 y 70 píxeles (predeterminado: 70px)

  • mobileIconSize: [int] Cambia el tamaño del icono móvil, valores recomendados entre 35 y 50 píxeles (predeterminado: 50px).

Lector de pantalla:

Los siguientes parámetros se pueden utilizar para modificar las clases CSS de personalización:

  • customSrBlacklistCSS: [String] Cambia la clase CSS de los elementos que se van a excluir (predeterminado: eyeAble_SrSkip).

  • customSrStartCSS: [String] Cambia la clase CSS para el nuevo elemento de inicio (predeterminado: eyeAble_SrStart).

  • CSS personalizadoSrText: [String] Cambia la clase CSS para el bloque que se leerá (predeterminado: eyeAble_SrText).

Excluir elementos de las funciones:

Los siguientes parámetros se pueden usar para excluir ciertos elementos de las funciones de Eye-Able. Esto es útil para texto que se sale de su contenedor al hacer zoom, o para elementos cuyos colores no deben ajustarse con el contraste o el modo nocturno. Los elementos se pueden seleccionar usando selectores CSS nativos. Más información aquí Los selectores CSS múltiples se separan por comas. ¡La excepción también se aplica a todos los elementos hijos de los elementos seleccionados!

  • lista negraContraste : [Cadena] Excluir elementos del ajuste de color del contraste o del modo nocturno.


P.ejEs ist Code zu sehen.

  • lista negraTamaño de fuente : [String] Excluir elementos de la ampliación de fuente.

P.ej

  • fondo blanco de fuerza : [String] Fuerza un fondo blanco cuando el modo nocturno o de contraste está activado.

Sebastian Fjeld

Sebastian Fjeld has been part of the team as a professional voiceover artist and copywriter at Eye-Able® since the beginning. He studied voice acting at a university and was trained by actors. Currently he is completing his education as an interpreter for various languages.

Más contribuciones

Si puede ser un poco más

Filtro

Filtrar por categoría

Confirma tu selección con el botón al final de la lista después de elegir las categorías.

Restablecer filtros
""

¿Advertencias de accesibilidad en Austria? Lo que las empresas europeas deben saber ahora mismo

Leer historia

Un año de la EAA: Dónde la mayoría de las empresas siguen fallando

Leer historia
Ilustración de un sitio web con el texto 'Accesible para todos' junto a un menú desplegable de herramientas de accesibilidad visual y un icono de accesibilidad.

No, un overlay tool no hace que un sitio web sea accesible automáticamente

Leer historia
Portátil con una tienda online en la pantalla, acompañada de símbolos gráficos para análisis, datos y accesibilidad. El logotipo de Eye-Able es visible en la esquina superior derecha.

Por qué los datos de producto accesibles mejoran la experiencia de usuario en eCommerce

Leer historia

You need more information?

Contact us and we will be happy to help you.

a man with down syndrome shows a woman something on the computer. they both laugh