Par défaut, le logiciel d'assistance Eye-Able® est intégré à une page web sous la forme d'une icône fixe par rapport à la fenêtre d'affichage. Cette position bien visible, associée à des icônes très contrastées, s'est avérée facile à utiliser lors de tests utilisateurs, même pour les personnes souffrant d'une grave déficience visuelle. Eye-Able® peut toutefois également être intégré sans difficulté directement dans la page web. Cela permet une intégration dans la barre de navigation ou dans d’autres conteneurs existants.
Au lieu de l'icône standard, il est possible d'utiliser n'importe quel élément de la page. Les fonctions « Ouvrir » et « Fermer » de l'icône standard seront alors associées à cet élément. Pour cela, le nouvel élément cible doit être créé ou modifié manuellement !
Pour établir ce lien, il faut ajouter l'identifiant CSS« eyeAble_customToolOpenerID »au nouvel élément cible. Dès qu'un élément portant cet identifiant est présent sur une page, le logo habituel est masqué et un écouteur d'événement correspondant est ajouté à cet événement. La barre d'outils reste à l'endroit où se trouverait le logo habituel.
Si plusieurs boutons d'ouverture/fermeture doivent être intégrés, il est également possible d'utiliser laclasse CSS «eyeAble_customToolOpenerClass». Le comportement est identique à celui dela méthodeutilisantl'ID CSS.
Remarque : sur toutes les sous-pages où il n'existe pas d'élément portant l'identifiant eyeAble_customToolOpenerID ou de la classe « eyeAble_customToolOpenerClass » , le logo standard continuera d’apparaître !
Si l'on souhaite associer Eye-Able à un élément de la page sans masquer le logo principal, on peut utiliser la balise«eyeAble_customToolOpenerNoHideClass».
Il est également possible d'ouvrir la barre d'outils Eye-Able directement via un lien. Pour cela, il suffit d'indiquer « javascript:EyeAbleAPI.toggleToolbar() » comme destination du lien.
Veillez à ce que le point d'accès à Eye-Able soit accessible via le clavier et comporte un texte compatible avec les lecteurs d'écran. Voici un exemple de libellé possible : « Ouvrir le logiciel d'assistance visuelle. Accessible via le clavier avec la combinaison ALT + 1 ».
À titre d'exemple, cette intégration a été réalisée sur cette page avec le logo suivant :
Vous trouverez ici le logo Eye-Able à télécharger et à intégrer (ou au format SVG ici) :
