[résolu] Ne pas visualiser le focus

Bonjour,

J'ai un une balise "a" qui contient une image et sur laquelle j'ai collé un évènement "click".

Lorsque je clique dessus, cette balise prend le focus et j'ai donc un petit trait en pointillé tout autour de mon image... et c'est moche...

Je cherche donc à faire disparaitre ce pointillé disgracieux.
- J'ai essayé de donner le focus à un autre élément ("window.focus()")
- j'ai essayé de perdre le focus ("this.blur()")
- voire de supprimer les pointillés ("a:focus { text-decoration: none; })"

Mais sans succès....

Est-ce que quelqu'un aurait une petite idée pour cela.

Bonne journée

A+ / F.
Modifié par Kleduts (20 Nov 2010 - 21:48)

Bonjour,

Moche, c'est très relatif . Sache que c'est très utile pour la navigation au clavier cela permet de signaler à un utilisateur où il se trouve dans ton document.

En résumé, c'est une très très mauvaise idée de vouloir le désactiver .

PS : je ne file volontairement pas la solution, ça pourrait me rendre malade .

Aux lecteurs avertis de ce sujet : Cela dit, est-ce problématique de désactiver ce signal dans le cas de l'activation du lien ?
Modifié par yodaswii (20 Nov 2010 - 16:23)

Bonjour,

ce pointillé extrêmement discret (gris clair, pointillé, 1px de large) est UTILE :
* tant d'un point de vue ergonomique (au moment où on clique : "est-ce que je clique au bon endroit ?" et en revenant à une page précédente pour continuer sa lecture : "mais où est-ce que j'avais cliqué il y a plusieurs minutes ?")
* que d'un point de vue accessibilité (ceux qui naviguent avec le seul clavier - touche tabulation - n'ont QUE ce misérable pointillé pour se repérer en tabulant ).
Il faut donc le laisser si tu ne veux pas dérouter tes visiteurs.

Felipe a écrit :
* tant d'un point de vue ergonomique (au moment où on clique : "est-ce que je clique au bon endroit ?" et en revenant à une page précédente pour continuer sa lecture : "mais où est-ce que j'avais cliqué il y a plusieurs minutes ?")

Tu réponds à ma question : autant le premier point me semble pas forcément évident autant le deuxième point est indiscutable .

Vous ne répondez pas à la question.

J'ai une image (un petit-bonhomme avec une étiquette "aide").
Lorsque je clique dessus, j'exécute du code Ajax qui m'ouvre une fenêtre d'aide (un div).

Lorsque cette fenêtre est affichée, le focus reste sur l'image du petit bonhomme est c'est moche (même relativement .


Il n'y a pas vraiment d'ambiguité sur le fait de "mais où est-ce que j'avais cliqué il y a plusieurs minutes ?". Ce petit bonhomme se retrouve sur toutes les pages et permet d'afficher l'aide.

Ensuite, je ne suis pas partisan de la suppression définitive de ces pointillés. Je veux juste qu'ils disparaissent lorsque le div est affiché. C'est tout. (d'où l'idée initiale de donner le focus à un autre objet).

A+ / F.
Modifié par Kleduts (20 Nov 2010 - 16:38)

Bonjour,
En fait tu as la réponse dans ta question
Puisque c' est du Ajax qui est déclanché et qu'il faut lire
le DIV d'aide mets le focus dessus
document.getElementById('tonDiv').focus();

Kleduts a écrit :
Vous ne répondez pas à la question.

C'est volontaire. Tu demandes à faire disparaitre la mise en valeur du focus dans le navigateur, et on te répond qu'il ne faut pas.

Ce qui serait plus utile ici, et tu as déjà tenté de le faire, c'est de transmettre le focus.
Je n'ai testé que dans Firefox, mais il semble que tu peux transmettre le focus (via la méthode element.focus() en JS) à tout élément capable de le recevoir:
- liens;
- éléments de formulaire;
- tout élément avec un attribut tabindex (typiquement avec la valeur "-1" si l'élément ne doit pas recevoir le focus à la navigation au clavier, et "0" autrement).

Tu peux par exemple donner le focus à l'élément que tu fais apparaitre. Et quand tu fermes cet élément (en le passant en display:none ou le retirant du DOM via un bouton accessible au clavier...), il faudrait redonner le focus à ton bouton qui permet d'afficher l'élément. Alors tu peux envisager de ne pas afficher de contour de focus pour le conteneur que tu fais apparaitre:

<a id="show-pseudo-popup" href="..."
   onclick="MYAPP.showWindow('pseudo-popup', 'pseudo-popup');">Montrer la fenêtre</a>

...

<div id="pseudo-popup" tabindex="-1" style="outline:none">
  <span tabindex="0" onclick="MYAPP.closeWindow('pseudo-popup', 'show-pseudo-popup');">Fermer cette fenêtre</span>
  <div>Contenu qui va bien.</div>
</div>

(En imaginant que tu as une méthode showWindow où tu indiques l'identifiant de l'élément à afficher en premier paramètre, et l'identifiant de l'élément auquel donner le focus en second paramètre.)
Modifié par Florent V. (20 Nov 2010 - 17:15)

Christele a écrit :
document.getElementById('tonDiv').focus();

N'a d'effet que si l'élément peut recevoir le focus. Voir message ci-dessus.

Florent V. a écrit :
N'a d'effet que si l'élément peut recevoir le focus. Voir message ci-dessus.

Oui bien sur,
J' aurais du ne rien préciser, car il est clair qu'il peut même avoir un petit lien neutre dans son DIV le but n'étant que de défaire le focus qui le gêne. Ta solution ne fait que confirmer ma solution qui coulait de source., c'est pas ton habitude ça ...
Modifié par Christele (20 Nov 2010 - 17:38)

J'aime bien l'idée de refiler le focus au div avec un tabindex à -1.
C'est exactement ce que je voulais.

Merci

A+ / F.

Christele a écrit :
Bonjour,
En fait tu as la réponse dans ta question
Puisque c' est du Ajax qui est déclanché et qu'il faut lire
le DIV d'aide mets le focus dessus
document.getElementById('tonDiv').focus();

J'avais essayé, mais sans le tabindex, cela ne fonctionne pas. J'avoue que je ne connaissais pas ce truc là...

A+ / F.

Je fais mon pénible...

Florent V. a écrit :

- tout élément avec un attribut tabindex (typiquement avec la valeur "-1" si l'élément ne doit pas recevoir le focus à la navigation au clavier, et "0" autrement).

TabIndex n'est pas dans la spécification de DIV en XHTML Strict 1.0...

Je vais essayer de trouver autre chose.

A+ / F.

Ben, sinon, si on ne veut pas que le petit trait pointillé apparaisse autour du lien : Un petit ajout dans la feuille de style.

a:active, a:focus
 { outline: none ;
 }

C'est quand même plus simple comme ça...
Modifié par Borak (20 Nov 2010 - 19:39)

Merci Borak pour ta contribution à un web non accessible...

As-tu seulement lu le reste de la discussion ?

Kleduts a écrit :
TabIndex n'est pas dans la spécification de DIV en XHTML Strict 1.0...

Attention aux conclusions hâtives.

Cet usage de tabindex:
- fonctionnait dans Internet Explorer et Firefox depuis belle lurette;
- a été recommandé comme mécanisme pour gérer le focus et la navigation au clavier dans les applications web par WAI-ARIA 1.0;
- a été implémenté dans les navigateurs restants (Opera, Safari, Chrome);
- est standardisé en HTML5.

Ce n'est donc pas un hack affreux, mais un standard «de fait» qui est devenu un standard tout court. (De même, si tu utilises les attributs HTML créés par WAI-ARIA, ça ne validera pas non plus en HTML4 ou XHTML1, mais ça reste une solution tout à fait valable.)

Je rappelle que la validation est un outil, pas une fin en soi. À toi de voir si:
- tu veux suivre XHTML1, et tu acceptes ponctuellement d'avoir des bouts de code invalide quand tu sais exactement de quoi il retourne;
- tu veux suivre HTML5, et la plupart de ces ajouts à HTML ou «standards de fait» deviennent valides... mais la spec elle-même prise comme référence sera en partie instable.

Borak a écrit :

a:active, a:focus
 { outline: none ;
 }

C'est quand même plus simple comme ça...

C'est justement cette technique qui pose un gros problème d'accessibilité (la navigation au clavier devient impossible), et qui a été déconseillée dans la plupart des messages ci-dessus.

J'en convient que la validation n'est pas une fin en soi. Maintenant, elle apporte quand même pas mal de chose.

Mais pour finir, j'aime bien cette idée du tabindex sur le div (et j'ai maintenant compris pourquoi cela ne passait pas la validation ) à qui je "refile" le focus une fois que j'ai cliqué sur mon image.

Merci pour cet œil d'expert.

A+ / F.

Laurie-Anne a écrit :
Merci Borak pour ta contribution à un web non accessible...

As-tu seulement lu le reste de la discussion ?

Oups, la honte

On peut peut être utiliser cette technique à condition de la remplacer par autre chose ? Genre un Background ou une couleur ? Est-ce que dans ce cas, c'est toléré ?
Modifié par Borak (20 Nov 2010 - 22:49)

Borak a écrit :
On peut peut être utiliser cette technique à condition de la remplacer par autre chose ?

Oui, du moment que le style :focus est suffisamment visible.
Pour ma part:
- je duplique tous les styles :hover en :focus;
- je garde le outline par défaut en plus.

OK, merci pour l'info. Je ferai plus attention
Modifié par Borak (21 Nov 2010 - 10:16)

Bonjour,

Je suis en train d'essayer de modifier le outline par défaut afin d'en avoir un commun à tous les navigateurs lorsque mon élément a le focus.

Je remarque deux choses curieuses, et j'aimerais avoir votre aide pour comprendre / avoir la solution à mes problèmes !

1 - Syntaxe pour surcharger le outline des éléments qui auront le focus

Si je fais :

*:focus {
	outline: 2px solid #ff6600;
}

ou :

:focus {
	outline: 2px solid #ff6600;
}

ou :

*:focus, :focus {
	outline: 2px solid #ff6600;
}

Alors mon style ne s'applique pas ! Je conserve le style par défaut du navigateur (1px dotted pour Firefox, 5px solid blue pour Safari)

Par contre si je fais :

*:focus {
	outline: 2px solid #ff6600;
}
:focus {
	outline: 2px solid #ff6600;
}

Alors mon style de "2px solid #ff6600" apparait bien (!)



2 - Le problème de Firefox avec les boutons

Une fois ce qui est ci-dessus appliqué, j'ai un soucis sous Firefox.
Mon élément est bien entouré de ma bordure orange (#ff6600), mais il subsiste un cadre de pointillés (1px dotted) à l'intérieur de mon bouton !

Alors que Safari remplace totalement la bordure bleue initiale par ma bordure orange, Firefox ajoute ma bordure orange, mais conserve la sienne par défaut.
Ceci se produit pour les éléments de type "button" (les boutons, les radio boutons...)

J'aimerais bien vraiment surcharger le style du user agent et ne garder que ma bordure orange...

Merci pour votre aide !
Et bonne année !!
Modifié par tooliphone (31 Dec 2010 - 15:31)