1178 sujets

Accessibilité du Web

[resolu] Supprimer le cadre du focus sur un lien

Pages :
(reprise du message précédent)

Salut c'est l'extra-terrestre

Je me permet un ch'ti up car le message est en résolu et j'aimerais avoir un peu plus d'avis.

Je suis le seul à vouloir différencier nettement ce focus par rapport au hover?
Bonjour,

Je viens de naviguer au clavier ici, sur Openweb et sur Web-pour-tous.

Une certitude : pour que la navigation au clavier soit un tant soit peu confortable, un renforcement de l'apparence au focus est indispensable. Le pointillé par défaut est souvent très difficile à repérer, voir impossible (sur une image, par exemple, ou quand il se trouve hors de l'espace affiché).

Par contre je ne suis pas convaincue de l'intérêt d'une apparence différente pour le hover... d'autant plus que mes essais ne m'ont pas permis d'en rencontrer un exemple Smiley confused
Monique a écrit :
Bonjour,

Je viens de naviguer au clavier ici, sur Openweb et sur Web-pour-tous.

Une certitude : pour que la navigation au clavier soit un tant soit peu confortable, un renforcement de l'apparence au focus est indispensable. Le pointillé par défaut est souvent très difficile à repérer, voir impossible (sur une image, par exemple, ou quand il se trouve hors de l'espace affiché).

Par contre je ne suis pas convaincue de l'intérêt d'une apparence différente pour le hover... d'autant plus que mes essais ne m'ont pas permis d'en rencontrer un exemple Smiley confused


Edit : tiens justement ici... l'image de la flèche "retour vers le haut" a disparu, mais le focus disparaît de ma vue en se plaçant dessus Smiley confus

Oups... je suis toujours en mode clavier... j'ai voulu éditer mon message et j'ai répondu... dur, dur Smiley confused
Modifié par Monique (13 Feb 2006 - 15:17)
a écrit :
Une certitude : pour que la navigation au clavier soit un tant soit peu confortable, un renforcement de l'apparence au focus est indispensable. Le pointillé par défaut est souvent très difficile à repérer, voir impossible (sur une image, par exemple, ou quand il se trouve hors de l'espace affiché).


Pour les navigateurs sensibles à la nav par tabulation il existe de nombreuses possibilités pour accroître la visibilité du lien en jouant sur le DOM, par exemple 

this.style.border="2px solid blue"
this.style.backgroundColor="rgb(200,150,50)"
this.style.backgroundPosition="0 -20px" (pour les images survolées...)
etc.


Si l'avantage du :focus par tabindex est évident, il a quelques inconvénients assez importants : d'abord il ne marche pas partout ni toujours donc il ne faut pas compter dessus comme un outil 100% fiable, ensuite si on l'applique il faut l'appliquer PARTOUT (sinon on perd le fil très vite) y compris sur les images, enfin il faut le construire correctement et ça c'est plus compliqué.
Il y a au moins deux problèmes : la valeur et l'ordre.
La valeur (tabindex="1"... "2"... etc) doit être largement calculée pour faire face à toutes les situations qu'on peut rencontrer, par exemple une page "imprévue" avec exceptionnellement 50 liens... On doit donc "réserver" des valeurs inutilisées pour ces cas-là, par exemple affecter des valeurs de 1 à 99 pour les menus principaux, de 100 à 199 pour les menus secondaires ou contextuels, de 200 à 299 pour le contenu de la page en cours, etc...
L'autre problème, plus compliqué, c'est celui de l'ordre d'apparition. Que doit-on suivre ?
- l'ordre "graphique" = :focus suit l'ordre de lecture à l'écran (par exemple 1/ liens d'évitement, 2/ menu principal, 3/ menu contextuel, 4/ fil d'ariane, 5/contenu de la page en cours, 6/ liens de pied de page)...
- l'ordre "navigationnel" = :focus détaille d'abord la hiérarchie des menus puis passe au contenu de la page (1/ évitement, 2/ menus divers, 3/ pied de page, 4/ contenu de la page)... ce qui fait sauter le focus d'un coin à l'autre de l'écran.
- l'ordre "naturel" du flux = :focus attaque par la premère ligne et finit par la dernière... en théorie flux et design devraient être organisés de façon similaire mais c'est pas toujours le cas.
En résumé et en attendant des avis éclairés sur la question, il me semble que tabindex est effectivement un "plus", mais aussi un "plus" de boulot Smiley biggol Je l'utilise dans certains cas et pour des raisons particulières mais finalement assez rarement et surtout sans en maîtriser toutes les subtilités évoquées plus haut.
Un Alsanaute compétent pourra sûrement nous en dire plus ?
Laurent Denis a écrit :
Bonjour,

La partie importante des choses : ne pas supprimer l'effet d'outline. Au mieux, appliquer le même style sur le focus et sur le hover. Au minimum, appliquer un effet supplémentaire au focus. Au pire, ne rien faire.


Bonjour,

Qu'entends tu par effet outline stp Laurent Denis ?
clb56 a écrit :


... Quand même ! ...


Gasp ! Smiley biggol

je ne suis pas tout à fait sûr que ce soit une idée à retenir, et en tous cas la forme sous laquelle je l'ai fait très rapidement est à revoir (la mise en place n'est pas complète, déjà). Ce n'est donc pas un exemple à retenir. En revanche, si la chose vous intéresse, vos avis sur cet essai bricolé sont les bienvenus. On pourrait en sortir quelque-chose Smiley cligne
Modifié par Laurent Denis (28 Feb 2006 - 12:50)
Pour ma part j'ai tendance à travailler les effets de survol de telle manière qu'il renforce le lien concerné. C'est d'ailleurs ce qui m'amène à faire a:hover = a:focus.

Dans ton cas le survol adouci parfois le rendu visuel du lien (je pense notamment à plan du site, navigation) et dans ce cas on se retrouve dans une situation un peu analogue à celle décrite par Monique concernant le outline éventuellement peu repérable au clavier. donc le choix d'un a:focus spécifique devient très utile.
Modifié par clb56 (28 Feb 2006 - 13:04)
Pages :
Sujet clos
Aller à