[resolu] Supprimer le cadre du focus sur un lien

Salut tout le monde,
il me prend une fantasie pour un de mes projets, j'ai enlevé le cadre en pointillé au focus sur les liens hypertexte (wwaaaaouhhououo).
Mais je me demandais si ce fameux cadre avait un rôle à jouer au niveau de la qualité de l'accessibilité, genre permettre de mieux situer un lien lorsqu'on utilise la navigation au clavier.
Alors j'ai été vilain à faire mon bidule ou pas ?

D'avance, merci
Modifié le 26 Jan 2005 - 11:05

Wooouppsss
Prenez ça sur le compte de la fatigue, j'aurai pu tester la navigation au clavier au lieu d'en parler sans savoir ^^

Bon alors la réponse :
N'UTILISEZ PAS DE METHODE DE SUPPRESSION DU CADRE POINTILLE AU FOCUS SUR UN LIEN.

En effet, la navigation au clavier s'en trouve cassée et plus moyen de naviguer au clavier.

Donc exit les "onfocus=blur()" Merci pour tout le monde

Peut-être un résolu ?

Lol, j'ai été pris par la patrouille
Modifié par Olivier (26 Jan 2006 - 22:09)

En CSS :

a:active
{
   outline:none;
}

Ca fonctionne, les tabulations fonctionnent aussi, mais c'est plus difficile de se repérer bien sûr...
(source : http://www.elaboration.be/index.php/2006/01/18/9-liens-firefox )
Modifié par Olivier (26 Jan 2006 - 22:09)

J'aurais tendance à pratiquer exactement l'inverse en surlignant au contraire les liens-liste pour la nav en tabindex :

<li><a href="index.html" accesskey="1" tabindex="10" title="Retour page d'accueil" 
onFocus='this.style.borderBottom="1px solid blue"' 
onBlur='this.style.borderBottom="none"'>Retour accueil</a></li>

ou encore

<li onFocus='this.style.backgroundColor="rgb(210,230,210)"' 
onBlur='this.style.backgroundColor="rgb(240,240,240)"' >
<a href="index.html" accesskey="1" tabindex="10" 
title="Retour page d'accueil" >Retour accueil</a></li>

selon le résultat souhaité...

Je l'applique également sur les pictos utilisés comme outils de nav et qui changent d'aspect à la souris mais évidemment pas avec tabindex.

D'un côté c'est vrai que ça alourdit la page, de l'autre ça ajoute du confort... Qu'en pensez-vous ?

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.
Modifié par Laurent Denis (29 Jan 2006 - 13:17)

Merci Laurent, j'avais effectivement oublié de préciser que l'effet produit par onFocus doit être exactement le même que celui produit par :hover, sinon on multiplie les systèmes d'assistance à la navigation et donc les sources de confusion.

a écrit :
Merci Laurent, j'avais effectivement oublié de préciser que l'effet produit par onFocus doit être exactement le même que celui produit par :hover, sinon on multiplie les systèmes d'assistance à la navigation et donc les sources de confusion.

Pourquoi exactement le même j'aurais d'ailleurs tendance à ne pas comprendre non plus la remarque de Laurent-Denis.

Pour moi justement le focus permet de se repérer facilement en utilisant le tabindex.

Donc si je comprends bien si le hover agit uniquement sur le soulignement par exemple, le focus devrait dans le meilleur des cas suivre la même règle et n'agir que sur le soulignement.

Visuellement je ne trouve pas cela extraordinaire pour se repérer le plus facilement et le plus rapidement possible.

Je ne vois pas ou pourrais être la source de confusion
Modifié par Hermann (26 Mar 2010 - 11:55)

Personnellement je navigue surtout à la souris mais aussi parfois au tabindex (notamment quand j'ai un verre de thé dans la main droite, ce qui arrive souvent) et il me semble que lorsqu'on multiplie inutilement les systèmes d'assistance on accroit la confusion. Donc si le :hover (ou le onMouseOver) surligne le lien en bleu par ex, le :focus (ou le onFocus) doit le faire aussi. D'autant plus qu'écrire

a:hover, a:focus {
background-color:#039;
}

est plus productif que

a:hover {
background-color:#039;
}
a:focus {
background-color:#555;
}

Ensuite le focus réagissant au click, lorsqu'on déplace la souris sur un autre lien il reste actif tant que l'utilisateur ne le fixe pas ailleurs, ce qui fait qu'il obtient visuellement deux systèmes concurrents sur la même page... C'est vrai que dans la plupart des cas le click sert à changer de page et donc cet inconvénient n'est jamais visible, mais ce n'est pas toujours le cas.

a écrit :
il me semble que lorsqu'on multiplie inutilement les systèmes d'assistance on accroit la confusion.

Pour moi hover et focus sont 2 choses bien distinctes qui doivent être différenciées.

Le hover sert pour naviguer à la souris donc je sais exactement ou je suis puisque je suis le curseur de ma souris et quand j'arrive sur le lien le hover s'enclenche.

Si je navigue au clavier je ne sais pas d'ou je pars et je ne connais pas le cheminement du flux ou des tabindex si ils existent

Qui dit que l'ordre logique graphique est repecté au niveau du flux.

En fonction du rendu graphique, je peux très bien m'attendre à me retrouver dans la partie contenu alors que le flux lui me diras le contraire et mon focus sera sur le menu alors que je le cherche sur le contenu.

Le différencier nettement c'est de suite pouvoir se situer dans le document si la structure ne suit pas le rendu graphique et même si elle le suit d'ailleurs.

Si à cela on rajoute que certaines personnes atteintes de handicaps peuvent vite fatiguer doit on en plus d'une navigation au clavier (parfois difficile) les obliger à redoubler d'attention pour savoir ou se situe le focus.

Pourquoi un site comme Openweb différencie t-il alors nettement le focus du hover?

C'est d'ailleurs pour cela que je ne comprends pas bien l'intervention de Laurent-Denis.
Modifié par knarf (01 Feb 2006 - 13:08)

knarf a écrit :
Pourquoi un site comme Openweb différencie t-il alors nettement le focus du hover?

Excellente question

Bon, on va jeter un oeil dans les archives...

a écrit :

Qui dit que l'ordre logique graphique est repecté au niveau du flux.

Re-excellente question...
Rien, et à la limite ça n'a pas d'importance de ce point de vue.

Deux possibilités :
Soit l'internaute est un utilisateur tabindex à 100% pour des raisons de motricité ou de précision de mouvement et il se fout de savoir quel système d'assistance visuelle :hover lui proposerait si...
Soit il alterne clavier et souris et je ne vois pas en quoi une cohérence est nuisible ??? Je peux au contraire constater que quand :hover et :focus réagissent identiquement je peux intuitivement passer de l'un à l'autre en stricte équivalence.
Modifié par Olivier (02 Feb 2006 - 14:09)

a écrit :
Soit l'internaute est un utilisateur tabindex à 100% pour des raisons de motricité ou de précision de mouvement et il se fout de savoir quel système d'assistance visuelle :hover lui proposerait si...

Cette affirmation se base elle sur du concret?

Donc si je suis bien, on considère le focus comme le hover de la navigation par tabindex et faire un focus nettement différent, facilement et rapidement repérable est une perte de temps et quelquechose d'inutile et qu'il vaux mieux privilègier des hover palot dèjà pas trés visible quand la souris passe dessus mais qui seront surement repérable du premier coup d'oeil en utlisant la tabulation.

J'aimerais vraiment avoir l'avis de personnes concernés, sur la non pertinence d'un tel mécanisme dans le cas d'une navigation au clavier
et si comme l'avance Arséne qu' à la limite on s'en fout (ce qui est tout à fait possible), car je travaille actuellement sur la refonte d'un site et je comptais bien le mettre en oeuvre y compris sur IE donc si il s'avère que cela n'est d'aucune utilité, je ne vais peux être pas y consacrer du temps inutile.

Il ne doit pas exister de critéres ou de bonne pratique concernant cela mais je trouvais vraiment que définir un focus particulier pouvais apporter un confort non négligeable dans le cadre d'une navigation au clavier.
Modifié par knarf (01 Feb 2006 - 19:32)

knarf a écrit :
on considère le focus comme le hover de la navigation par tabindex

C'est mon opinion mais elle ne demande qu'à être changée...

knarf a écrit :
Cette affirmation se base elle sur du concret?

Quand j'avance que l'internaute qui navigue à 100% au clavier ne visualise jamais :hover mais toujours :focus, c'est qu'il me semble que :hover est typiquement un événement souris, mais peut-être me trompe-je ???

knarf a écrit :
des hover palot dèjà pas trés visible quand la souris passe dessus

On devrait toujours faire des :hover utiles et pertinents (contraste, diff. de coul de background, surlignage visible, etc), c'est-à-dire apportant une vraie assistance... si c'est juste pour souligner en #eee sur un fond blanc, autant s'en passer effectivement. Le graphisme via CSS ne sert pas à affaiblir les fonctionnalités natives de html (lien bleus soulignés bien visibles et identifiables comme tels) mais - au pire - à obtenir un rendu équivalent en terme de signalisation, et au mieux à l'accroître.... en tout cas jamais à l'estomper.

knarf a écrit :
définir un focus particulier pouvais apporter un confort non négligeable dans le cadre d'une navigation au clavier

100% d'accord avec toi, mais pourquoi pas la même que :hover ? Il me semble qu'il y a plus de bénéfice à développer dans ce sens plutôt que dans leur différenciation ?

Arsene a écrit :

On devrait toujours faire des :hover utiles et pertinents (contraste, diff. de coul de background, surlignage visible, etc), c'est-à-dire apportant une vraie assistance... si c'est juste pour souligner en #eee sur un fond blanc, autant s'en passer effectivement.

A mon avis Knarf voici bien l'argument crucial de la réponse à ton interrogation.

Pour le dire autrement et de manière un peu iconoclaste ce n'est pas le :focus
qui doit être comme le :hover mais bien le contraire. Du point de vue d'une réflexion en amont sur l'accessibilité cet ordre logique est assez évident.

PS : comme je fais moi même très souvent cette coquille je vous la signale > On ne dit pas naviguer par tabindex (surtout s'il n'y en a pas de tabindex ) mais simplement par la touche tab.

<edit class="hs">
Tiens ça me fait 800 posts.
</edit>
Modifié par clb56 (02 Feb 2006 - 12:28)

...alors va pour le consensus "naviguer PAR tabindex" ?

Ta remarque

a écrit :

ce n'est pas le :focus qui doit être comme le :hover mais bien le contraire

est très intéressante parce qu'elle replace effectivement une chronologie dans l'écriture des pages :
1/ on écrit la page a minima : html brut de décoffrage
2/ on l'habille par CSS : couche graphique
3/ on crée les outils d'assistance : couche JS ou autre.

et non pas l'inverse comme nous le pratiquons tous (ou presque) :
1/ on réalise un beau site qu'on écrit en CSS + JS + .....
2/ on y coule le contenu
3/ on vérifie que c'est bien accessible

sorry... "naviguer A L'AIDE DE tabindex"

a écrit :
Quand j'avance que l'internaute qui navigue à 100% au clavier ne visualise jamais :hover mais toujours :focus, c'est qu'il me semble que :hover est typiquement un événement souris, mais peut-être me trompe-je ???

Oui tout à fait, mais je ne comprenais pas très bien justement pourquoi tu parlais du hover qui n'interviens pas.

Donc je pensais que tu assimilais le hover au focus et que tu déclarais que ces personnes se foutaient du focus (mais apperement ce n'est pas le cas) c'est pour cela que je posais la question du concret.

Ce focus est quand même bien un fil conducteur qui doit être nettement visible.

a écrit :
Pour le dire autrement et de manière un peu iconoclaste ce n'est pas le :focus
qui doit être comme le :hover mais bien le contraire. Du point de vue d'une réflexion en amont sur l'accessibilité cet ordre logique est assez évident.

Penser au focus oui de toute façon dans une optique d'accessibilité je trouve cela logique même si rien y oblige sauf erreur (critéres, référentiel, bonne pratique) moi je le fait.

Aprés penser d'abord à celui-ci (focus) et ensuite calquer le hover dessus cela ne doit pas être si évident que cela pour de multiples raisons.

Toujours en partant du principe que le focus doit être repérable au premier coup d'oeil j'essaye d'y mettre un fond et une police avec un contraste important.

Pour des raisons d'esthétisme et de contraintes clients mettre par exemple un gros placard de couleur sur le hover d'un lien dans un texte ne sera peut être pas facilement accepté et sera surement préféré un changement plus soft de couleur de police et une action au niveau du soulignement.

Je reprends ici l'exemple d'Open-web ou le lien "présentation" du menu de droite et les liens du contenu ne travail que sur cela.

Mettre à la place les mêmes caractéristiques que le focus fond gris et police blanche (contraste) sur le hover du texte serais je pense moins esthétique et plus difficilement imposable à un client potentiel.
Modifié par knarf (02 Feb 2006 - 19:34)

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?