Par défaut, le logiciel d'assistance Eye-Able® est intégré dans une page web sous forme d'icône fixe par rapport au port d'affichage. Cette position présente, associée à des icônes contrastées, s'est avérée facile à utiliser lors des tests utilisateurs, même pour les utilisateurs souffrant d'une forte déficience visuelle. Mais Eye-Able® peut aussi être intégré sans problème directement dans la page web. Il est ainsi possible de l'intégrer dans la barre de navigation ou dans d'autres conteneurs existants.
Comme alternative à l'icône régulière, on peut prendre un élément quelconque sur la page. Les fonctions "Ouvrir et fermer" de l'icône régulière sont liées à cet élément. Le nouvel élément cible doit être créé ou adapté lui-même !
Pour établir le lien, l'ID CSS "eyeAble_customToolOpenerID" doit être ajouté au nouvel élément cible. Dès qu'un élément avec cet ID existe sur une page, le logo habituel est masqué et un EventListener correspondant est ajouté à cet événement. La position de la barre d'outils reste à l'endroit où elle se trouverait avec le logo habituel.
Si plusieurs boutons d'ouverture/fermeture doivent être intégrés, la classe CSS " " peut également être utilisée.eyeAble_customToolOpenerClass" peut être utilisée. Le comportement est identique à celui de la méthode CSS-ID.
Remarque : Sur toutes les sous-pages où il n'y a pas d'élément de ce type avec l'ID eyeAble_customToolOpener ou eyeAble_customToolOpenerClass, il n'y a pas de logo. le logo normal continuera à s'afficher !
Si l'on souhaite associer Eye-Able à un élément de la page sans masquer le logo principal, on peut utiliser la "eyeAble_customToolOpenerNoHideClass" peut être utilisée.
Il est également possible d'ouvrir la barre d'outils Eye-Able directement via un lien. Pour cela, il suffit de définir "javascript:EyeAbleAPI.toggleToolbar()" comme cible du lien .
Veillez à ce que le point d'accès pour Eye-Able soit accessible avec le clavier et possède un texte accessible aux lecteurs d'écran. Une légende possible serait : "Ouvrir le logiciel d'assistance visuelle. Accessible au clavier par ALT + 1".
À des fins de démonstration, cette intégration est réalisée sur cette page avec le logo suivant :
Vous trouverez le logo Eye-Able à télécharger et à intégrer ici (ou comme SVG ici) :