[Résolu]Souci depuis le tuto FAQ sur les ancres

Bonjour,
j'ai respecté à la lettre la petite recommandation lisible dans ce tuto sur les ancres.

Mon souci est le suivant : lorsque je clique sous firefox sur ce lien ancre, le focus naviguateur se fait sur le lien lui-même, et non sur le DIV que j'ai marqué avec son id.
Tout est correct au niveau orthographique pourtant.

Je teste encore la chose mais il me semble que justement si j'enlève cette partie au lien ancre :

name="dernieres-nouvelles" id="dernieres-nouvelles"

...et bien le comportement redevient correct. Comment est-ce possible ?
Modifié par JJJ (28 Nov 2007 - 04:17)

Pour situer le contexte un peu, je remarque ce problème dans une page assez classique : contenu très long, donc sommaire en début de page qui fait office de menu cliquable.
Les items de ce menu sont des liens ancre renvoyant à des contenus en bloc (exactement comme dans la faq d'alsa en clair).
Ces items sont contenus ainsi :

<div>
<h4>Sommaire</h4>
<p>
<a href="#ancre1">item 1</a>
</p>
</div>

et chaque lien de ce menu renvoie à un titre de type <h3 id="ancre1"> etc etc.

Merci pour vos lumières

Bonjour,

Tu veux dire que tu utilises deux fois le même id, une fois pour un h3 et une fois pour une ancre placée juste après?

Un identifiant, ça ne s'utilise qu'une seule fois.

Il faut donc faire:

<h3 id="mon_ancre">Titre</h3>
<p>Mon contenu</p>

ou bien

<a name="mon_ancre" id="mon_ancre" href="#mon_ancre"></a>
<h3>Titre</h3>
<p>Mon contenu</p>

Mais pas un mix des deux.

La deuxième forme (plus complexe et moins «propre») est néanmoins conseillée car plus compatible avec la navigation au clavier avec les différents navigateurs...

Pas tout à fait - enfin je ne crois pas - voilà exactement ce que j'utilise et qui ne marche pas :

En début de page (dans un sommaire) :

<a href="#ancre1" name="ancre1" id="ancre1" title="Raccourci vers l'ancre 1">Première ancre</a>

Plus bas :

<h3 id="ancre1">Première ancre</h3>

J'ai une erreur d'ID ? Trop d'ID ? Il me semblait pourtant que je devais déclarer cet ID même dans le lien de départ.

JJJ a écrit :
Pas tout à fait

Effectivement, tu as cumulé deux erreurs (ce sujet va finir dans un best-of ).

La première, c'est que tu as utilisé deux fois l'identifiant "ancre1" dans ta page. Or, les identifiants sont supposés être uniques!

La deuxième et la plus grave, c'est que tu as utilisé la syntaxe pour créer une ancre (point d'arrivée) pour rédiger un lien (point de départ). Bref, tu as fait les choses à l'envers.

Le lien vers une ancre se rédige ainsi:

<a href="#machin">Aller à machin</a>

Et l'ancre (point d'arrivée) peut se rédiger ainsi:

<div id="machin">...

ou bien ainsi:

<h3 id="machin">...

ou bien ainsi:

<a href="#machin" id="machin" name="machin"></a>

Dans les deux premiers cas, on place l'identifiant sur un élément qui appartient déjà à la structure du document. C'est une solution très élégante, car on se sert du contenu existant. Si je veux que mon lien pointe vers un h3 ou un div donné dans la page, je le fais, et voilà.

Problème: certains navigateurs ont du mal avec ce genre de raccourcis internes. Ils préfèrent les bonnes vieilles «ancres» à l'ancienne, faites avec un élément a vide et un attribut name.

Si on veut que ça marche correctement avec ces navigateurs, notamment pour ce qui concerne la navigation au clavier (la transmission de focus, ce genre de choses...), la syntaxe est la suivante:

<a href="#" name="machin" id="machin"></a>

Problème encore: en navigant au clavier, ce lien vide et invisible reçoit le focus, et peut être activé. Activer ce lien ferait à priori remonter en début de page. Pour éviter ça, on fait pointer l'ancre vers elle-même:

<a href="#machin" name="machin" id="machin"></a>

Florent V. a écrit :

(ce sujet va finir dans un best-of ).

et même au zapping de canal

Non mais j'ai bien conscience qu'il y a redondance.
Ce que je comprends pas, c'est que si je rédige un lien vers une ancre qui soit correct aussi pour certains naviguateurs et respecte la naviguation clavier, bref la totale, je rédige :

<a href="#machin" name="machin" id="machin"></a>

Mais il faut bien amener ce lien vers son ancre, puisque c'est sa vocation, oui ? Donc je dois bien indiquer un identifiant d'ancre, n'importe où, dans un bloc DIV par exemple :

<div id="machin">machin</div>

Du coup on a un premièrement un lien vers ancre qui se rappelle lui-même (en vertu de ce que tu expliques sur le focus), et un ancrage qui porte le même nom, d'où redondance.
C'est bien ce que j'ai cru comprendre du petit topo de faq, mais trouvé paradoxal.

Donc, j'ai besoin d'une explication de texte

JJJ a écrit :
Du coup on a un premièrement un lien vers ancre qui se rappelle lui-même (en vertu de ce que tu expliques sur le focus), et un ancrage qui porte le même nom, d'où redondance.

Et donc il faut supprimer la redondance.

La base, c'est d'avoir un lien qui pointe vers une ancre. On peut placer ce lien n'importe où dans un document (souvent on en trouvera en tout début de document, sous la forme de liens d'accès rapide, ou bien au début d'un article pour accéder aux différentes parties du dit article).

Une fois que ça c'est acquis, il nous faut une ancre. Et là, deux solutions:
- soit on crée une ancre à l'ancienne (<a name="machin"></a>), avec tant qu'à faire la syntaxe en béton armé qui va bien (<a name="machin" id="machin" href="#machin"></a>);
- soit on place un attribut id avec la valeur "machin" sur l'élément vers lequel on voulait pointer à la base.

Mais on ne fait pas les deux à la fois.

La FAQ n'est pas très complète sur ce point (il faudrait un article entier pour tout expliquer de A à Z), mais je ne pense pas qu'elle préconise à un moment où un autre d'utiliser à la fois un id sur un élément existant ET une ancre avec le même identifiant.

Ok je vois, merci pour ces précisions.

Florent V. a écrit :

Une fois que ça c'est acquis, il nous faut une ancre. Et là, deux solutions:
- soit on crée une ancre à l'ancienne (<a name="machin"></a>), avec tant qu'à faire la syntaxe en béton armé qui va bien (<a name="machin" id="machin" href="#machin"></a>);

Deux choses me viennent :
- quel est l'interêt que ce soit un lien dans le cas d'un <a name="machin" id="machin" href="#machin"></a> ? En effet, le href="#machin" ne pointe sur rien dans son propre cas. D'après mes tests en tout cas ce lien ne permet pas non plus de remonter vers le lien initial, comme celui-ci a pu nous faire descendre vers cette ancre.
- Est-ce parce que dans le cas d'une non utilisation dans un lien, l'attribut name n'a pas sa place (d'après mon Tidy en tout cas) ?

On utilise un élément a pour l'ancre parce que, pour des raisons «historiques», c'est plus compatible comme ça.
On utilise l'attribut name en plus de id parce que, pour des raisons «historiques», c'est plus compatible comme ça.
On utilise l'attribut href pour l'élément a de l'ancre parce que, pour je ne sais plus trop quelle raison, c'est plus compatible comme ça.
Et comme on a utiliser un attribut href, on le fait pointer vers l'ancre (donc le a pointe vers lui-même) parce que certains navigateurs donnent le focus à cet élément et que l'activation du lien avec n'importe quelle valeur n'est pas souhaitable.

Sur ce, je crois qu'un petit RTFM s'impose
http://css.alsacreations.com/Accessibilite-du-Web/Les-liens-d-evitement

(Le dernier point, la valeur du href, n'est pas évoqué dans cet article.)

JJJ a écrit :
D'après mes tests en tout cas ce lien ne permet pas non plus de remonter vers le lien initial, comme celui-ci a pu nous faire descendre vers cette ancre.

Si on veut obtenir ce type de chose (un lien aller et un lien retour), là encore pas de miracle: il faut le coder.

Exemple:

<a href="#machin" id="truc" name="truc">Aller à machin</a>

...

<a href="#truc" id="machin" name="machin">Retour à truc</a>

Florent V.en très grande forme (si,si) a écrit :

...
Sur ce, je crois qu'un petit RTFM s'impose
...

Read The... Friendly Manual, I suppose ?
Ce qui doit vouloir dire si mon anglais résiste bien aux outrages du temps :
"La documentation est ton amie, elle est là pour te fournir les informations qui semblent te manquer..."
Right ?

6l20 a écrit :
Right ?

Obviously.

Il y a aussi le RTFS, d'ailleurs.

Cela coule de source
A défaut, RTFB...mais dans tout les cas RTFAQ, si besoin STFW

<encore plus hs>
Tu as mangé quoi ce soir ?
</>