Crédits photographiques : Any IP Ltd, lien vers l'auteur est https://anyip.io/ et Simplex - Web Design Sydney 

En cas d'autocontrôle de la configuration, il est possible d'adapter Eye-Able - au-delà du configurateur - à son propre site web. Les avantages d'une telle adaptation sont décrits dans l'article "Quels avantages m'apporte une adaptation initiale ? Pour effectuer ces adaptations, une compréhension avancée de HTML et CSS est nécessaire. Pour chaque site web, nous proposons donc l'option d'un contrôle et d'une optimisation complets d'Eye-Able. Certaines possibilités de cette adaptation sont toutefois possibles à tout moment pour les utilisateurs non gérés d'Eye-Able. Les réglages disponibles sont présentés ci-dessous.

Remarque : Les configurations suivantes ne sont qu'un sous-ensemble des paramètres disponibles dans une optimisation complète par Eye-Able.

Pour étendre la configuration d'Eye-Able, il faut ajouter des paires clé-valeur supplémentaires à la variable eyeAble_pluginConfig. Vous trouverez un exemple de configuration ici(https://www.eye-able-cdn.com/example.js).

Outre l'intégration de la configuration directement en ligne, les modifications de la configuration Eye-Able peuvent également être effectuées via une fonction séparée. Pour pouvoir effectuer soi-même des modifications de la configuration, il est donc recommandé d'utiliser la méthode 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>

Vous pouvez commenter les paramètres qui ne doivent pas être modifiés.

Agrandissement :

Les paramètres suivants existent pour limiter l'agrandissement :

• maxMagnification: [int] Décrit l'agrandissement maximal (par défaut : 21)
• maxMobileMagnification: [int] Décrit l'agrandissement mobile maximal (par défaut : 3)

position:

Les paramètres suivants existent pour modifier la position de l'icône principale :

• topPosition : [Chaîne] Définit la position supérieure de l'icône sur le bureau en % ou px (par défaut : "10%")
• rightPosition : [Chaîne] Définit la position de droite de l'icône sur le bureau en px. Si sidePosition est réglé sur "left", la position à gauche est définie (par défaut : "10px").
• mobileBottomPosition: [Chaîne] Définit la position du bas de l'icône mobile en % ou px (par défaut : "15%")
• mobileRightPosition: [Chaîne] Définit la position droite de l'icône mobile en px (par défaut : "10px")
• sidePosition: [String] Définit le côté où l'icône apparaît "left" ou "right" (par défaut : "right")

Apparence :

Les paramètres suivants existent pour modifier l'apparence :

• mainIconAlt : [int] Change l'icône principale entre trois variantes 0, 1 ou 2 (par défaut : 0)
• iconSize : [int] Redimensionne l'icône sur le bureau, valeurs recommandées entre 50 et 70 pixels (par défaut : 70px)
• mobileIconSize : [int] Redimensionne l'icône pour les mobiles, valeurs recommandées entre 35 et 50 pixels (par défaut : 50px)

Lecteur d'écran :

Les paramètres suivants permettent de modifier les classes CSS d'adaptation :

• customSrBlacklistCSS : [String] Change la classe CSS des éléments à exclure (par défaut : eyeAble_SrSkip)
• customSrStartCSS : [Chaîne] Modifie la classe CSS pour le nouvel élément Start (par défaut : eyeAble_SrStart)
• customSrTextCSS : [Chaîne] Modifie la classe CSS pour le bloc à lire (par défaut : eyeAble_SrText )

Exclure des éléments des fonctions :

Les paramètres suivants permettent d'exclure certains éléments des fonctions d'Eye-Able. Cela est utile pour le texte qui sort de son conteneur lors de l'agrandissement ou pour les éléments dont les couleurs ne doivent pas être adaptées par le mode contraste ou nuit. Les éléments peuvent être sélectionnés via des sélecteurs CSS natifs (plus d'informations ici(https://www.w3schools.com/cssref/css_selectors.asp)). Plusieurs sélecteurs CSS sont séparés par des virgules. Cette exception s'applique également à tous les enfants des éléments sélectionnés !

• blacklistContrast: [Chaîne] Exclut les éléments de l'ajustement des couleurs du mode contraste ou nuit.

par exemple

• blacklistFontsize: [Chaîne] Exclut les éléments de l'agrandissement de police

par exemple

 

• forceWhiteBackground : [Chaîne] Forcer un arrière-plan blanc lorsque le mode nuit ou contraste est activé