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

Intégration de Eye-Able directement dans la page

Cette image montre un bureau avec de nombreux écrans dans une atmosphère froide.

Partager l'article :

Par défaut, le logiciel d'assistance Eye-Able® est intégré sur une page web sous forme d'icône fixe par rapport au port d'affichage.
Cette image montre un bureau avec de nombreux écrans dans une atmosphère froide.

Intégration de Eye-Able directement dans la page

Partager cet article :

Cette image montre un bureau avec de nombreux écrans dans une atmosphère froide.
Par défaut, le logiciel d'assistance Eye-Able® est intégré sur une page web sous forme d'icône fixe par rapport au port d'affichage.

Par défaut, le logiciel d'assistance Eye-Able® est intégré à 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. Eye-Able® peut toutefois 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, il est également possible d'utiliser la classe CSS "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 Eye-Able doit être associé à un élément de la page sans masquer le logo principal, il est possible d'utiliser la classe "eyeAble_customToolOpenerNoHideClass" classe CSS peut être utilisée.


Il est également possible d'ouvrir directement la barre d'outils Eye-Able 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 inscription 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) :

Eye-Able Logo - bonhomme sur fond noir

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. Vous rendez ainsi vos informations accessibles à tous et n'excluez aucun visiteur* - en bref, vous vous ouvrez à un nouveau groupe cible, sans aucun volume de marketing élevé.

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 :