[RESOLU] Liens d'évitement

Bonjour,

J'ai vu plusieurs topics et dans le bouquin de Raphael que l'on parle de liens d'évitement mais je ne saisis pas bien ce que c'est exactement ?

Serait il possible d'avoir un rapide topo illustré d'un exemple?

Merki d'avance
Modifié par chintaoui (27 Jul 2005 - 12:27)

Les liens d'évitement sont des "raccourcis" vers les principales sections d'une page, la plupart du temps vers les menus et le contenu, eventuellement vers le moteur de recherche. Ils sont situés en haut des pages (visuellement et dans le code). Il permettent notamment aux personnes utilisant des navigateurs vocaux de zapper certaines sections.

Exemple sur mon site (tout en haut de la page, désolé pour la pub c'est le 1er lien que j'avais sous la main)

Plop,

Bonne question, et comme j'ai cherché la réponse récemment, je me permet une réponse qui sera complétée très certainement ensuite par plus compétent

En terme d'accessibilité, on préconise de placer le contenu principal de la page en premier dans le code source pour accéder directement à l'info recherchée, en particulier pour les outils comme lynx. Le CSS permet facilement ceci en règle général.

Malgré tout il peut arriver pour diverses raisons que ce ne soit pas possible, on utilise alors la technique des liens d'évitement, pour permettre au navigateur comme lynx de passer directement au contenu.

Ceci consiste en un lien classique de type

<a href="#contenu">Aller au contenu</a>

Qui permet donc de passer sur l'id "contenu" de la page comme par exemple

<h2 id="contenu">Mon contenu</h2>

Ainsi on évite à ceux dont le navigation est limitée de passer par toute la page pour se rendre à l'essentiel.

Pour les autres comme les navigateurs graphiques, on peut alors soit cacher ce lien, pour des raisons d'esthétisme, soit le laisser. Libre à chacun de faire comme bon lui semble.

Voilà ce que j'en ai compris moi ^^

Question : Comment cacher le lien sous les navigateurs graphiques et pas sous les autres navigateurs ?
Modifié par chintaoui (27 Jul 2005 - 12:12)

Le principe est de faire sortir le lien de la fenetre d'affichage. Pour ce faire la méthode la plus solide et compatible c'est :

a#liendevitement {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

chintaoui a écrit :
Question : Comment cacher le lien sous les navigateurs graphiques et pas sous les autres navigateurs ?

Quelle réponse veux-tu ? La bonne, la mauvaise, ou la pire ?

La bonne, c'est que des astuces qui déplacent le contenu à cacher en dehors de la zone de visualisation du navigateur sont préférables aux display:none, au visibility:hidden : ça limite les effets de bande inattendu dans les lecteurs d'écran.

Mais la mauvaise, c'est que ces astuces ont quand même des effets surprenants en navigation visuelle au clavier (cas type d'un handicapé moteur).

Et l'encore plus mauvaise nouvelle, c'est que le graphiste ne fait pas un travail sensé s'il ne l'intègre pas dans une problématique de qualité globale du site. Dans celle-ci, le fait que ces liens soient apparents n'est pas problématique. C'est au graphisme du site d'intégrer cette donnée, pas l'inverse.

Maintenant, certes, il faut gérer le graphiste et ses caprices... Ceci peut aider :
- http://openweb.eu.org/articles/mieux_travailler_accessibilite/
- http://openweb.eu.org/articles/mieux_travailler_accessibilite_2/

Loupé l'édition de mon message, que je complète donc ici :

- ou bien s'asseoir tranquillement sur ce point de détail de l'accessibilité, qui fait un peu "arbre cachant la forêt" : un site sans liens d'évitement, mais avec des pratiques d'accessibilité solides sur les images et autres contenus non textuels, les tableaux de présentation,les formulaires, etc. me sera déjà plus accessible qu'un site qui se focalise uniquement sur des liens d'évitement sans avoir assuré le niveau 1 de la WAI.
Modifié par Laurent Denis (27 Jul 2005 - 12:27)

OK merci de votre réactivité. . Je sais comment je vais me débrouiller now.