🎉 Nouvel outil : Langage simple. Cliquer sur le bouton et essayer en direct

Adapter manuellement Eye-Able à son propre site web

L'image montre un ordinateur portable sur lequel un programme informatique est ouvert. On y voit du code informatique.

Partager l'article :

En cas d'autocontrôle de la configuration, il est possible d'adapter Eye-Able - au-delà du configurateur - à son propre site web.
L'image montre un ordinateur portable sur lequel un programme informatique est ouvert. On y voit du code informatique.

Adapter manuellement Eye-Able à son propre site web

Partager cet article :

L'image montre un ordinateur portable sur lequel un programme informatique est ouvert. On y voit du code informatique.
En cas d'autocontrôle de la configuration, il est possible d'adapter Eye-Able - au-delà du configurateur - à son propre site web.

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

Exemple sur la manière d'exclure des éléments du contraste
  • blacklistFontsize: [Chaîne] Exclut les éléments de l'agrandissement de police

par exemple

Exemple de la manière d'exclure des éléments de l'agrandissement

 

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

 

Simple pour tous

Vous êtes intéressé(e) ? Nous nous ferons un plaisir de vous aider.

Avec plus de 25 fonctions autour de l'accessibilité numérique, Eye-Able vous aide également à réduire durablement vos barrières. Ainsi, vous rendez vos informations accessibles à tous et n'excluez aucun visiteur* - en bref, vous accédez à un nouveau groupe cible, sans avoir recours à des volumes de marketing élevés.

L'icône montre le personnage de l'accessibilité

Entretien de conseil

Entretien de conseil sans engagement sur l'accessibilité numérique en général

L'icône montre le personnage de l'accessibilité

Analyse

Discussion des potentiels d'optimisation de votre site web

L'icône montre le personnage de l'accessibilité

Démonstration en direct

Présentation du logiciel d'assistance directement sur votre site web

Plus de contributions

Si vous avez besoin d'un peu plus :