Escrito por Chris Schmidt el 20 de diciembre de 2022

Eye-Able Adaptar manualmente a su propio sitio web

Accesibilidad

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
Mujer con portátil con B2B, B2C y B2G

¿Se aplica la EAA al sector B2B?

Leer historia
Ilustración de un iceberg rodeado de iconos que representan pruebas, tecnología, comentarios, documentación y certificación, simbolizando los aspectos visibles y ocultos de la accesibilidad digital.

¿Cómo reconocer un sitio web realmente accesible?

Leer historia

¿Necesitas más información?

Contáctanos y con gusto te ayudaremos.

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