Bonsoir,
a écrit :
Quelle différence entre une ancre et une ID ?
Quel est le problème de focus ... je ne comprends pas de quoi il s'agit
Désolé j'aurais du être plus clair dans mon explication.
Un ancre est un lien vide (sans attribut href) doté d'un attribut "name".
Cet élément est dédié à un seul usage : créer la cible d'un lien interne.
Mais il est possible, également, de se servir de l'attribut ID d'un élément quelconque comme cible d'un lien interne, car ce qui fait la cible c'est l'attribut (id ou name) pas la nature de l'élément.
Prenons l'exemple du formulaire de recherche :
J'ai un lien interne "rechercher" dont le but est de donner le focus sur le formulaire.
La cible du lien interne est définis sur l'ID de la balise form.
J'ai deux moyens de réaliser cette action :
- A la souris, pas de soucis.
- A la tabulation pas de soucis, après avoir activé le lien par entrée je tabule et j'obtiens bien le focus sur l'input du formulaire.
Tout va bien donc, sauf qu'il existe une troisième méthode, mélange des deux première :
- Je clique à la souris ET je tabule pour obtenir le focus sur l'input.
Dans ce cas là ça ne fonctionne pas.
Le click de la souris déplace le focus de la zone active sur l'élément cible, mais en revanche le pointeur de la tabulation n'est lui pas déplacé, car l'élément formulaire (la balise form) n'est pas un élément exploitable par le pointeur de la tabulation.
On pourrait vouloir dés lors utiliser un ID attribué au label ou directement l'ID attribué au champ input du formulaire mais dans ce cas là on essuie un nouvel échec.
La tabulation suivant le click de la souris sur le lien interne activera le premier élément exploitable suivant, par exemple l'input "envoyer".
En revanche, si l'on utilise l'élément "ancre" dédié au seul usage de créer la cible d'un lien interne, alors la dernière méthode (souris+tabulation) fonctionne parfaitement car, évidemment, un lien fut-il vide est un élément exploitable par le pointeur de la tabulation.
Il est donc très important de ne pas utiliser un élément quelconque comme cible d'un lien interne mais bien une ancre dédiée.
Pour en terminer avec notre formulaire de recherche, une méthode "friendly" comme le disent nos amis anglais est de rajouter à notre ancre un evenement javascript onfocus afin d'éviter de devoir faire une tabulation pour démarrer la saisie.
Dans ce cas là il convient également d'attribuer un title au champ input pour bien indiquer aux lecteurs d'écrans la nature du champs activé.
Ce qui nous donne :
<form>
<fieldset>
<a name="mon_ancre" id="mon_ancre" onfocus="document.getElementById('recherche').focus()"></a>
<legend>Formulaire de recherche</legend>
<label for="recherche">Rechercher<label>
<input type="text" id="recherche" name="recherche" title="Tapez votre recherche" accesskey="4" />
...
</fieldset>
</form>
Ou quelque chose d'approchant...
On reproduit ainsi avec le lien interne un fonctionnement identique à celui de l'accesskey affecté sur l'input du formulaire de recherche et qui donne un focus automatique.
JP
Modifié par jpv (19 Jul 2005 - 23:42)
)
(affreux, pas beau !)
.