Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.
Consulter les coursParcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.
Consulter les écolesAccédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.
Accéder au tchatUn autre chapitre qui s'inscrit dans le cadre de l'accessibilité du Web. On va tous apprendre une technique appelée communément liens d'évitement (skip navigation links). Cette astuce va nous permettre d'accroître l'accessibilité de nos pages Web 
Les liens d'évitement connus en anglais sous l'appelation "skip navigation links" qui veut dire sauter (skip) les liens de navigation (navigation links), permettent à certaines personnes comme les non-voyants ou les gens qui utilisent le clavier (ordinateurs de poche, PDA etc.), de se rendre rapidement au contenu de la page (main content) sans avoir à passer par les liens de navigation qui constituent une voie forcée.
Une personne qui utilise un lecteur d'écran tel que Jaws pourra activer le lien d'évitement pour aller directement au contenu de la page. Les gens qui utilisent le clavier (handicaps moteurs) vont aussi bénéficier de ces liens. Au lieu d'utiliser le clavier pour aller au contenu de la page. Il suffit d'atteindre par la touche tabulation le lien d'évitement qui est généralement placé en haut de la page, puis l'activer pour se retrouver automatiquement dans le contenu de la page.
Les liens d'aide à la navigation pourront aussi profiter aux gens qui utilisent la souris, car ça leur permet d'éviter de défiler la page surtout si elle est trop longue (exemple : le site du W3C).
Les liens d'évitement deviennent une recommandation à grand poids pour les sites dont le contenu se situe trop loin du haut de la page, par exemple après 20 liens et/ou d'autres éléments.
Les liens d'évitement peuvent être de grand secours pour les utilisateurs qui consultent régulièrement une page Web, et qui en a ras le bol de passer à chaque fois par les éléments préliminaires avant d'accéder au contenu qui les intéresse.
Certains lecteurs d'écran tels que IBM Home Page Reader et Jaws ont implémenté des mécanismes d'aide à la navigation très avancés comme la navigation de titre en titre.
On peut classer les liens en deux grandes catégories, selon leur raison d'être dans la page :
Les liens de consultation : ce sont les liens habituels que vous connaissez. Ils permettent de consulter des pages Web et d'accéder à différentes ressources (XHTML, PDF, DOC etc.) sur le Web. Ces liens peuvent permettre une navigation interne (technique des ancres) aussi bien qu'une navigation externe.
Les liens d'aide à la navigation locale (local navigation links) ne concernent que la navigation locale c'est-à-dire qu'ils permettent des transportations au sein de la page. Leur implémentation est généralement motivée par la volonté de simplifier la navigation au sein de la page. Cette catégorie peut être subdivisée en d'autres sous-éléments :
Ils permettent d'accéder à certaines parties dont l'usage est fréquent dans le site. Par exemple : "aller au menu", "aller au contenu", "aller à la recherche". Les liens d'accès rapide peuvent aussi être équipés d'attributs accesskey (clé de raccourci) pour les rendre plus rapides, rapide deux fois vaut
mieux qu'une seule fois 
Contrairement aux liens d'accès rapide et les liens de navigation interne dont la direction varie dans tous les sens. Les liens d'évitement se caractérisent par un sens ascendant du haut vers le bas. Ceci peut être expliqué du fait que ce genre de liens est fait pour éviter des parties de la page et qui dit éviter dit se rendre à une partie inférieure après avoir contourné une partie qui lui est supérieure.
Exemples de liens d'évitement : passer à la section "bla bla", ignorer les outils de navigation, passer aux news, passer la barre de navigation, sauter l'introduction, aller au contenu (s'il est destiné à éviter les éléments préliminaires comme une barre de navigation). Utilisez de préférence les deux mots-clés "passer à" qui a le sens "accéder à" ou son homologue "passer" qui est plus collé à la notion des liens d'évitement et qui contient l'idée de "sauter" (skip).
En matière de liens de saut de section ou vers une section, il faudra en premier lieu se demander ce que l'utilisateur veut savoir : veut-il savoir quelle section il saute ou vers laquelle il est dirigé ? Ainsi, l'intitulé du lien (ou de l'alternative textuelle associée à l'image lien) sera-t-il de type "sauter le menu de navigation" ou "aller au menu de navigation" ? Le second cas ne laisse pas deviner quelle information sera sautée, alors qu'il pourrait s'agir d'une information importante.
Pour une première visite, l'utilisateur préfère savoir quelle information il saute, quitte à passer consécutivement plusieurs sections. En revanche, un visiteur habitué préférera rencontrer rapidement un lien vers le contenu, étant déjà conscient qu'il ne sautera pas d'information utile pour lui.Un lien direct vers le contenu, dont l'intitulé peut être "Aller au contenu", trouvera donc plutôt sa place en tout début du code source. Tandis qu'un lien de saut de section trouvera sa place juste avant des sections répétitives comme la barre de navigation ou le menu.
Il faut veiller à bien expliciter les liens d'évitement et d'éviter tout ce qui est vague et imprécis, par exemple "aller à la section suivante" est trop générique. Ceci pourra constituer un écueil à la bonne compréhension du schéma de la page et par la suite d'y bien naviguer.
Ils consistent en des déplacements purs dépourvus de sémantique (contrairement aux liens d'accès rapide). Par exemple "Retour en haut de page", "atteindre le bas de page", ou les fameuses flèches vers le haut et vers le bas.
En ce qui concerne les liens vers le haut de page, il convient de pointer vers le début du texte courant, et pas simplement vers le vrai début de page. On évitera donc de placer l'ancre "#top" avant la bannière du site, par exemple. On placera l'ancre de préférence avant le titre principal de la page.
Il ne faut pas non plus implémenter le lien "retour en haut de page" de cette manière :
<body id= "top"> <!-- et dans un stade avancé --> <a href= "#top">retour en haut de page</a>Vous ne devez pas utiliser n'importe quel éléments XHTML (même si c'est permis et c'est plus logique), car ça va désynchroniser l'ordre de tabulation chez les deux navigateurs IE 6 et 7. Il faut utiliser un lien réel (balise a avec attribut href) pour remédier au bug des deux browsers Microsoft. Ceci est expliqué dans la partie qui suit : Implémentation et mise en pratique des liens d'évitement.
Le site www.accessiweb.org a fait allusion à ces trois types de liens dans la liste suivante :
Ces aides à la navigation, au sein d'une page, donnent à l'utilisateur la possibilité :
Les liens d'évitement reposent sur la technique des ancres (Anchors) ou signets. Vous pouvez utiliser n'importe quel élément XHTML doté d'un attribut id comme ancre. Mais il est plus judicieux d'utiliser la balise a avec l'attribut href comme une ancre :
<a href= "#content">Aller au contenu</a> <!-- et dans un stade avancé --> <a id= "content" name="content" href="#"></a>
La deuxième balise a ne constitue pas un lien mais uniquement une ancre vers laquelle le lien "Aller au contenu" pointe. Vous avez le plein droit de préciser à la fois l'attribut name et id avec la même valeur. Si votre code XHTML est analysé par un parseur SGML/HTML, il va tenir compte uniquement de l'attribut name. Et s'il est interprété par un parseur XML il va considérer uniquement l'attribut id (l'attribut name étant ignoré). Ceci nous permet de maintenir une compatibilité ascendante vers les anciens navigateurs tout en étant conforme aux normes XHTML.
Normalement vous n'avez nul besoin de l'attribut href pour définir une ancre. Mais il est utile pour pallier à un bug chez les deux navigateurs Internet Explorer 6 et 7. En fait lorsque vous vous rendez à l'ancre (élément a sans attribut href) la séquence des tabulations ne se poursuit pas mais il s'initialise lorsque vous tabulez à la suite. Donc souvenez-vous de cela : l'utilisation des éléments XHTML autre qu'un vrai lien (en-tête, a sans attribut href etc.) désynchronise la séquence des tabulations. C'est pourquoi vous devez implémenter vos ancres sous-forme de liens réels, même si cela apparaît un peu aberrant.
En fait ce n'est pas la seule solution qui peut être envisagée. Il y en a d'autres idées plus brillantes que je vais étaler dans la partie suivante.
L'une des méthodes les plus sûres consiste à spécifier un ordre de tabulation avec l'attribut tabindex à tous les liens qu'ils soient dotés de l'attribut href (liens) ou non (ancres). J'ai essayé cette solution sur les deux navigateurs IE 6 et 7, le bug a disparut. Lorsque vous atterrissez sur une ancre représentée par un élément a sans attribut href, la séquence de tabulation se poursuit et ne se désynchronise pas. Ceci pourra bien être pénible surtout si la page contient beaucoup de liens, mais c'est la solution qui est la plus sûre et qui ne représente aucun effet secondaire.
Cette technique consiste à ajouter l'attribut href qui a pour valeur un dièse "#" aux ancres introduites par la balise a. C'est un peu aberrant car les ancres "a" n'ont nullement besoin d'un attribut href, à moins qu'il s'agisse d'une ancre et d'un lien qui se justifie. Voici un exemple d'une ancre implémentée sous forme de lien :
<a href= "#content">Aller au contenu</a> <!-- et dans un stade avancé --> <a href= "#" id= "content" name="content"></a>
Le signe dièse veut dire que le lien pointe vers la même page (la page courante). Certes cette astuce permet de remédier au bug d'Internet explorer car la séquence de tabulation se poursuit normalement après l'ancre, en plus si un lecteur appuie sur l'ancre, la page s'actualise uniquement car le lien pointe vers la même page. Mais il ne faut pas oublier nos chers internautes non-voyants surfant avec des lecteurs d'écran. En fait cela crée une gêne pour les utilisateurs des navigateurs vocaux, car les ancres seront restituées (contrairement à des ancres sans attribut href) ce qui peut les perturber un peu.
Il y a deux autres solutions qui consistent à placer une ancre <a> sans attribut href dans une cellule de tableau ou bien un div qui a une largeur bien déterminée. Voici deux exemples :
<table summary="Begin main content"><tr><td> <a name="main" id="main"></a></td></tr></table> <!-- ou bien --> <div style="width: 300px;"><a name="main" id="main"> </a></div>
Je vous recommande d'utiliser plutôt la balise div qui n'a pas de sens et d'éviter l'emploi de la balise table qui est destinée à contenir des données tabulaires pour des raisons de respect de la sémantique.
L'endroit idéal où peut être placée l'ancre du lien d'évitement traditionnel "Aller au contenu" est juste avant le premier en-tête du contenu principal de la page. Vous devez absolument éviter de placer l'ancre après le titre :
<a href= "#content">Aller au contenu</a> <!-- et dans un stade avancé --> <h1>En-tête N° 1</h1> <a href= "#" id= "content" name="content" /></a>
Les navigateurs graphiques ne vont pas afficher le titre (il faut défiler un petit peu vers le haut) et les lecteurs d'écran ne vont restituer que la partie inférieure à l'en-tête ce qui peut être source de gêne pour les non-voyants.
Je parie que vous vous êtes déjà demandés : que doit-on faire pour que nos liens s'habillent par des images, au lieu du texte simple 
L'astuce est très facile, je dirais même stupide 
(façon de parler). Bon passons au chapitre suivant, où vous trouverez la réponse à votre question : les images cliquables (images liens).