1178 sujets

Accessibilité du Web

Aides accessibles au survol, inacessibles quand navigation clavier

Bonjour,

Tout le monde a déjà rencontré ce type d'aide : un mot, généralement une abréviation ou un acronyme, souligné, souvent en pointillé, qui, lorsque l'on le survole, affiche une bulle d'aide.

J'ai remarqué, y compris sur des sites soucieux d'accessibilité, que cette aide n'est pas activée lors de la navigation au clavier.

Bien sûr, il suffirait - je crois, d'après mes maigres connaissances - d'en faire un lien pour que ce soit le cas.

Ma questions est donc la suivante : Si c'est un comportement volontairement recherché, pour quelle raison l'est-ce ?

Merci
Bonjour,

C'est aides sont en fait des titles (généralement appliqué à <abbr> ou <acronym>). C'est le comportement du navigateur qui est en cause et non le code, dans ce cas. Utiliser des liens serait une mauvaise idée (car le balisage serait trompeur et inaproprié).

Si ces aides sont gérées en JavaScript, le problème vient de l'évènement appelant la fonction JS qui devrait être onfocus au lieu de onmouseover.
Merci de ta réponse, Laurie-Anne.

Tu as vu juste, c'est dans le cadre de <abr> et de <acronym> que je les utilisais.

Pour le deuxième point, pas de Javascript, uniquement du CSS.

Mais alors comment, techniquement, garder une réaction on focus sans en faire un lien ?
Comme tu le dis, je pressentais bien que ce n'était pas joli-joli.
Pour l'instant, j'en ai fait des liens, mais ça ne me plaît pas.
Bonjour,

Jamais essayé, mais une solution pour donner le focus à un acronyme serait peut-être l'utilisation de l'attribut "tabindex".
Shunkin a écrit :
Jamais essayé, mais une solution pour donner le focus à un acronyme serait peut-être l'utilisation de l'attribut "tabindex".

Attention ! l'utilisation de l'attribut tabindex, outre qu'il n'est pas autorisé sur les éléments abbr et acronym (il ne peut être utilisé que dans les éléments a, area, button, input, object, select et textarea), comporte quelques contre-indications. Smiley cligne
Pour les contre-indications, il faut faire avec et en tenir compte lors de l'intégration.
Pour le respect de la DTD, il me semble qu'en effet ce ne soit pas autorisé en HTML4 et XHTML, mais le sera, à priori, pour abbr en HTML5. De plus, ARIA recommande l'utilisation de tabindex pour donner le focus à un élément originellement non pourvu, ce qui est le cas d'acronym et abbr.

EDIT: discussion sur le sujet et lien vers la recommandation ARIA.
Modifié par Shunkin (21 Jan 2010 - 22:01)
Les solutions techniques WCAG à la question des sigles ne se limitent pas aux balises abbr et acronym, et celles-ci ne sont pas nécessairement la plus appropriée :
* présence du sigle et de son explicitation dans un glossaire accessible sur le site (pas de balisage ni d'explicitation du sigle nécessaire dans les autres pages)
* création d'un lien sur le sigle, visant une entrée de glossaire plus complète, avec un title explicitant le sigle. Le lien peut également, via javascript, afficher une définition modale (ajax)
* indication du sens du sigle dans le corps du texte

Plus généralement, les sigles ne sont pas un problème à traiter isolément, mais dans une démarche d'ensemble sur les syntaxes cryptiques, les niveaux de lecture, le jargon etc. La question est plus éditoriale que technique.

Sinon, du côté technique, il faut bien différencier l'usage "classique" de tabindex (délicat plutôt que contestable par principe, contrairement à ce que suggère l'article cité) et son usage dans le cadre ARIA (qui n'a rien de problématique).
Modifié par Laurent Denis (22 Jan 2010 - 08:05)
Sujet clos
Aller à