Pour ou contre les liens d’évitement ?
Non rassurez-vous, je ne suis pas en train de vous parler des liens Skip intro
des animations Flash, mais plutôt des raccourcis en haut de page qui permettent de sauter la navigation et d’accéder directement au contenu.
Plusieurs articles viennent de paraîtrent sur le sujet :
Les avis des différents auteurs de ces articles sont plutôt partagés. J’ai fait le choix de ne plus en mettre sur mon site pour une simple et bonne raison : le titre du site est censé être le premier élément de la page (et du code source). Ce titre, même s’il est placé dans des balises <h1>, obtiendra un moins bon score de référencement s’il est précédé par des liens d’évitement.
Et vous, comment faites-vous ? Est-il possible d’avoir l’avis objectif de pros du référencement et de l’accessibilité ?
Sébastien Billard a dit:
Concernant le référencement ça ne change pas grand chose, si ce n’est rien. Ce n’est pas parce que un <h1> descend d’une ligne que le positionnement devrait en être bouleversé. Et la démarche la plus pertinente me semble d’abord de structurer le contenu pour l’utilisateur tout en ayant en tête le référencement, plutôt que de construire une page pour son référencement en pensant ensuite à l’utilisateur.
Au niveau accessibilité, ils sont conseillés, et même pour un valide ils peuvent être utiles par ex sur de très faibles résolutions. Je n’ai pas vraiment d’avis tranché sur la question, il faut que je creuse davantage.
neolao a dit:
Moi si je devais faire une choix, je mettrai en second le référencement. C’est aux moteurs de recherche de s’adapter.
Sinon, l’idéal serait qu’il y ai une sorte de convention pour aller directement vers le contenu, menu etc. Des gens ont essayé de faire une liste de raccourcis clavier.
Je sais pas si les gens qui naviguent en texte ont un clavier spécial. Par exemple des touches “menu”, “contenu”, etc.
Raphael a dit:
Franchement, si j’ai le choix entre faire un site pour Google et faire un site pour des visiteurs, mon choix est vite fait.
Cédric a dit:
Et bien Fred, sur le coup je suis un peu déçu par ton argument googlesque…
D’autant que :
- la différence doit être extrêmement proche de 0 - pour une accroche “simplifions l’internet” , c’est bof comme réaction…
Fred C. a dit:
Ne soyez pas déçu, mon argumentation n’est pas seulement Googlesque, elle tient égalemnet compte de ce l’on vous enseigne dans des formations à l’accessibilité.
Il me semble que cette règle du
<h1>comme premier élément de la page est une des règles qui était enseignée par Accessiweb. Depuis, ils ont revu leur position et préconisent l’insertion de liens d’évitement en haut de page, sans trop préciser l’impact que cela peut avoir.Mais bon, je serais tenté de vous dire : est-ce qu’il vaut mieux avoir une page qui n’est pas accessible avec des liens d’évitement ou une page parfaitement accessible sans liens d’évitement ?
/Fred
neolao a dit:
Ben si ces liens d’évitement ne servent pas, je les mets pas. On les met pour un soucis d’accessibilité justement.
Donc deuxième choix.
Fred C. a dit:
Si l’on souhaite respecter la sémantique d’une page (et c’est mon choix), le titre de la page (et la balise
<h1>qui va avec) doivent être les premiers ééments du code source.Quelle est la position du W3C (et du WAI) à ce sujet ?
/Fred
Sébastien Billard a dit:
L’élément <title> est déjà un titre et cet élément est obligatoire pour tout document html.
Par contre pour les <hn>, je n’ai jamais rien vu indiquant qu’ils devaient être en 1er dans le code. Les specs disent juste que les titres <hn> “décrivent le sujet des sections qu’ils introduisent”.
Frank a dit:
Bonjour à tous,
C’est beau l’anglais dommage que ce ne soit pas accessible à tout le monde
Sinon, si la balise Link était supportée par plus de navigateurs, peut être que la question ne se poserait pas et que ces liens pourraient en faire partie?
Jaws et lynx la prennent bien en compte.
Je ne connais pas l’impact sur le referencement mais cela simplifierait peut être certaines choses non?
Warning: parse_url(http://) [function.parse-url]: Unable to parse url in /home/users/fredcavazza/wp/wp-content/plugins/mbla.php on line 462
Sylvain C. a dit:
Peut-être que le fait de regrouper dans un div (title=”navigation”) les liens d’évitement puis dans un autre div (title=”titre du doc”) le contenu de la page offre une solution sémantique acceptable qui ne nuise pas trop au positionnement. Pour le reste je suis d’accord avec mes camarades : c’est bien aux moteurs de s’adapter…
Monique a dit:
Bonjour,
La première chose que lit une synthèse vocale, c’est le contenu de l’élément title et pas celui de h1. C’est donc lui qu’il faut soigner pour que l’internaute sache sur quel site il se trouve, qu’il ait une idée du contenu qu’il va trouver sur la page.
Du point de vue de l’accessibilité, un titre h1 tout seul n’apporte pas grand chose si la page est un peu longue et complexe. Ce qui est important c’est l’utilisation bien hiérarchisée des éléments hn, la plupart des aides techniques permettent de se déplacer d’un élément à l’autre.
Je considère les liens d’évitement (que je préfère appeler liens d’accès direct) comme indispensables si la page est longue. Mais comme y figure généralement aussi un lien vers la page “politique d’accessibilité” et vers le formulaire de recherche, je les considère comme indispensables dans tous les cas.
Je ne suis pas d’avis non plus de les cacher : ils peuvent être utiles aussi aux voyants, ceux qui naviguent au clavier par exemple.
Amicalement,
Monique
Warning: parse_url(http://) [function.parse-url]: Unable to parse url in /home/users/fredcavazza/wp/wp-content/plugins/mbla.php on line 462
Nico a dit:
Pour l’accessibilité, ces liens sont indispensables.
Comme d’autres l’ont dit, on ne doit pas faire de sites web pour un agent-utilisateur spécifique, qu’il soit un navigateur ou encore un moteur de recherche.
Le WAI est en perpétuelle réflexion sur le sujet (en attente des WCAG 2.0 ;), il est donc simple de suivre leurs recommandations, et rien n’empêche l’utilisation de ce type de liens avant le contenu de la page (menu, éditorial, etc.). Au contraire.
Pour le référencement, cela se traduit par des liens avec des ancres, donc pas forcément utile.
Par ailleurs, pour une bonne pratique, il suffit de regarder le site du w3c :p.
Aloa a dit:
Comme dit plus haut, les skip links n’ont de réel intérêt que pour des pages dotées de beaucoup de contenu et, cela va sans dire mais encore mieux en le disant, correctement structurées. C’est une aide à la navigation qui peut être précieuse dans certains cas, inutile dans d’autres…
Pour ce qui est de savoir s’ils sont préjudiciables à son référencement : no comment !
Warning: parse_url(http://) [function.parse-url]: Unable to parse url in /home/users/fredcavazza/wp/wp-content/plugins/mbla.php on line 462
Bertrand a dit:
<h1/> : <h2 style=”display: none;”/>
<liens d’”évitement” style=”display: none;”/>
<menu(s) de navigation/>
<h2/>
etc. (corps contenu)
<liens d’”évitement” style=”display: none;”/>
Avec des raccourcis claviers exposés sur une page.
Fred C. a dit:
Bertrand,
Je ne voudrais pas rentré dans un débat d’expert, mais il me semble que tout ce qui est mis dans un container avec un propriété
display:nonen’est pas considéré comme accessible, car certains lecteurs d’écran peuvent interpréter les CSS.Donc le mieux est encore de jouer sur la couleur de ces liens pour les camoufler dans le fond.
/Fred
Raphael a dit:
@Fred : “Je ne voudrais pas rentré dans un débat d’expert, mais il me semble que tout ce qui est mis dans un container avec un propriété display:none n’est pas considéré comme accessible, car certains lecteurs d’écran peuvent interpréter les CSS”
> En effet, il est maintenant reconnu que “display: none” est plus nuisible qu’autre chose. Il est a éviter absolument : http://blog.alsacreations.com/2006/01/29/220-remplacement-dimages-halte-au-display-none
Warning: parse_url(http://) [function.parse-url]: Unable to parse url in /home/users/fredcavazza/wp/wp-content/plugins/mbla.php on line 462
Pascal a dit:
Fred C : “Donc le mieux est encore de jouer sur la couleur de ces liens pour les camoufler dans le fond.”
Heu, pour le coup on risque de se faire “blacklister” par les moteur de recherche non ?
Aloa a dit:
A propos du camouflage de contenus destinés aux lecteurs d’écran, on en parle ici (english) :
http://www.webaim.org/techniques/css/invisiblecontent
Jérémie a dit:
Cette soit disante «règle du h1» a été mal comprise, et mal appliquée.
Siddartha a dit:
En supposant que le h1 change sur chacune des pages puisqu’il est censé décrire le contenu principal de chaque page, l’impact de la présence ou pas de ces liens d’évitement sera trés faible, voire quasi nulle sur le positionnement de ces mêmes pages.
Ces liens dits d’évitement sont par nécessité présents sur chacune des pages du site et sont, pour le coup, complétement dévalorisés par des moteurs comme Google.
A l’image d’un menu, ces liens seront flaggés comme fonctionnel par notre ami Googlebot, et ainsi seront moins valorisés qu’un lien bien contextualisé à l’intérieur d’un article par exemple.
jeromek a dit:
“le titre du site est censé être le premier élément de la page“
Le titre de la page est contenu dans la balise <TITLE>…</TITLE>, et non dans une balise <H1>…</H1>.
“Un élément de titre décrit brièvement le sujet de la section qu’il introduit.“
La balise <H1>…</H1> introduit une section, non une page. Rien d’ailleurs n’interdit l’utilisation de plusieurs balises <H1>. Il y est même fait référence dans les notes de la recommandation.
“Ce titre, même s’il est placé dans des balises <h1>, obtiendra un moins bon score de référencement s’il est précédé par des liens d’évitement“
Certes, plus un mot est présent tôt dans une page, plus il semble avoir d’importance dans le référencement, pour Google tout du moins. Mais cette pondération s’estompe fortement, et n’est pas sensible à ce point.
Mais surtout, est-il vraiment utile ici de référencer l’ensemble des pages de votre site sur l’expression “fredcavazza.net”, qui est de surcroït le nom de domaine du site, élément bien plus performant que tout autre en matière de référencement?
L’introduction réelle de chaque page n’est-elle pas censée être le titre du billet lui même?
“Est-il possible d’avoir l’avis objectif de pros du référencement et de l’accessibilité ?“
Je vous avez déjà transmis par mail mon avis sur l’absence de lien d’évitement sur cette version du site. Je ne peux qu’aller une fois de plus dans ce sens. Cela ne nuira pas au référencement des pages du site, contrairement au fait d’avoir une balise <h1>…</h1> identique sur chaque page. Et cela est très utile, en particulier (mais pas que) aux personnes utilisant un lecteur de page.
david2.0 a dit:
Bonjour,
Personnellement, lorsque j’ai l’opportunité de construire un référencement dès l’étude d’un site, je préconise vivement de privilégier le contenu (et donc son titre) en tant que premier élément lu par les moteurs. Evidemment chaque contenu et titre sera différent pour chaque page. La raison, une dilution possible de l’expression mise en avant (et donc répétée dans la balise <title> => primordial). L’impact sur le référencement est évident.
Bien entendu, vous pouvez être bien positionné avec une page proposant des liens qui précédent le contenu mais ne vise t-on pas l’”idéal” lorsqu’on en a la possibilité ?
Cordialement,
David
Fred C. a dit:
Ouf, Merci David ! Enfin un peu de soutien de la part de mes lecteurs. Je croyais bien être définitivement rangé dans la catégorie des méchants-marketeux-qui-ne-pensent-plus-aux-utilisateurs-mais-qui-ne-font-que-des-courbettes-à-Google.
/Fred
neolao a dit:
moi j’ai quand même un malaise avec <h1>
<title> n’est pas visible dans la page, donc on utilise <h1> qui devient le grand titre. Et donc il est tout seul ce <h1>.
Est-ce qu’on peut se passer d’utiliser <h1> pour afficher le grand titre ? Utiliser un <span> ou autre ?
Warning: parse_url(http://) [function.parse-url]: Unable to parse url in /home/users/fredcavazza/wp/wp-content/plugins/mbla.php on line 462
Alexandre a dit:
Si je ne trompe pas <title> n’est pas visible dans le corps de la page par convention.
Voir à cet effet le really undoing css d’Eric Meyer et ce commentaire qui met en oeuvre l’exemple. La specification du W3C annonce que cet élément (<title>) ne fait pas partie du flux textuel du document, qu’il doit être déplacé.
A propos de l’élément <h1> rien n’indique qu’il est unique : on dispose de six niveaux d’intitulés, allant de 1 à 6. On doit donc pouvoir utiliser plusieurs foix <h1> dans un document.
Dans cet esprit, rien n’indique non plus qu’il doit être le premier élément du <body>. A l’instar d’un livre, d’une rédaction, je crois que l’on peut trouver une introduction (balisée en <p> par ex.) suivi d’un développement en plusieurs points, hiérarchisées en <hn>.
Toutefois, l’usage a rendu la balise <h1> unique, souvent à des fins de référencement. En cela, sa position haute dans la page n’est-elle pas héritée des “300 premiers mots” anciennement scannés par les moteurs de recherche ?
jpv a dit:
Bonjour,
On associe souvent les bénéfices des liens d’évitements avec les lecteurs d’écrans ce qui est vrai mais très insuffisant.
Les bénéfices des liens d’évitements concernent surtout les utilisateurs qui naviguent au clavier et pour lesquels il n’y à aucune autre solution de navigation rapide dans la structure du contenu.
Les cacher par CSS ou ne pas en utiliser à comme conséquence de rendre la navigation dans le contenu extrèmement pénible pour ces publics.
Pour le reste, qu’il soit avant ou après le titre h1, n’à pas beaucoup d’importance, c’est juste moins pratique dans le second cas.
Jean-pierre
Toniob a dit:
Je n’ai fait que survoler les commentaires donc je ne sais pas si la technique est passée mais il existe une balise spéciale à mettre dans le header pour faire ça :
<link rel=”section” title=”Titre du lien” href=”#ancre” />
Après, je ne sais pas comment c’est interprété dans les lecteurs vocaux mais je sais que les moteurs de recherche ne s’en servent pas et que lynx affichent ces liens en haut du document.
Warning: parse_url(http://) [function.parse-url]: Unable to parse url in /home/users/fredcavazza/wp/wp-content/plugins/mbla.php on line 462
shangaillily a dit:
Bonsoir à tous,
Je suis un peu surprise d’apprendre qu’on peut utiliser plusieurs fois le H1 alors que d’après Braillenet, il me semble que c’est préconisé d’utiliser un H1 unique car la valeur du H1 va représenter le TITRE de la rubrique sélectionnée, en un mot, le résumé du contenu de la page.
Vous vous focalisez un peu trop sur le référencement, n’oubliez pas que les liens d’évitement sont très utilisés quand l’utilisateur revient plusieurs fois sur le site. Si vous les supprimez, cela veut dire que vous allez ralentir le rythme de navigation de certains utilisateurs et ceux-ci vont subir à chaque fois les informations de la page avant d’atteindre la cible voulue…