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

Intégration d'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é à 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 d'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é à 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é 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) :

Logo Eye-Able - 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. 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 :