Jour 11 : Eviter les liens de navigation
Si vous avez décidé de ne pas modifier vos gabarits pour présenter votre contenu principal en premier, voici un compromis : fournir un lien pour éviter tous les liens de navigation. Ce n'est pas une solution parfaite (présenter votre contenu principal en premier est mieux) mais c'est un compromis acceptable que beaucoup de sites utilisent.
Ce "lien d'évitement" est juste une balise <a> classique, comme tout autre lien, mais nous utiliserons CSS pour le cacher des navigateurs visuels comme Internet Explorer et Netscape. Cela ne modifiera pas du tout la présentation de votre page. Ce sera totalement invisible.
Qui en bénéficie ?
- Marc en bénéficie. Quand il visite votre page, Lynx affichera le lien et lui permettra d'éviter la barre de navigation et d'aller directement au contenu principal. Voir Jour 10 : Présenter votre contenu principal en premier pour comprendre l'importance de ceci.
- Jackie en bénéficie. Lorsqu'elle visite votre page, JAWS lira le lien d'évitement et lui permettra d'éviter la barre de navigation et d'aller directement au contenu principal.
Comment le réaliser ?
Tout d'abord, utilisez le visualisateur Lynx sur votre page d'accueil pour déterminer si votre barre de navigation est présentée avant votre contenu principal. Si votre contenu principal vient en premier, cette astuce ne s'applique pas à vous ; Profitez donc d'un jour de repos.
Ensuite, définissez une règle CSS pour les liens d'évitement, pour les rendre invisible aux navigateurs visuels. Si vous avez une feuille de style externe, ajoutez la règle à la fin de celle-ci (Si vous avez plusieurs feuilles de style externes, ajoutez cette règle dans celle qui est compatible avec Netscape 4.). Si vous avez juste une section <style> au début de votre gabarit, ajoutez la règle juste après la balise <style>.
.skiplink {display:none}
Ensuite, insérez le lien d'évitement de navigation tout de suite après le nom de votre site et la description de votre site. Vous n'arrivez pas à les trouver ? Recherchez les variables appropriées dans votre gabarit.
- Movable Type : cherchez
<$MTBlogTitle$>et<$MTBlogDescription$>. - Greymatter : Il n'y a pas de variables de gabarit spécifiques ; cherchez le nom et la ligne descriptive de votre site Web.
- Radio : cherchez
<%siteName%>et<%description%>. - Manila : cherchez
{homePageLink (siteName)}et{tagLine}. - Blogger : cherchez
<$BlogTitle$>.
Vous les avez trouvé ? Tout juste après le nom de votre site web et la description du site, insérez le lien d'évitement :
<a class="skiplink" href="#startcontent">Evitez la navgation</a>
Maintenant, vous devez trouver une ancre vers laquelle le lien d'évitement devrait pointer ; cela devrait être au début du contenu principal. Vous ne trouvez pas votre contenu principal ? Ne paniquez pas. Les variables de gabarit vont vous aider encore une fois.
- Movable Type : cherchez
<MTEntries>. - Greymatter : Dans votre gabarit Main Index, cherchez
{{logbody}}. Sur vos gabarits Entry Page, cherchez{{entrymainbody}}. - Radio : cherchez
<%bodytext%>. - Manila : cherchez
{bodytext}. - Blogger : cherchez
<Blogger>.
Le format de votre ancre dépend de la version de HTML vous utilisez. Vérifiez votre DOCTYPE, ensuite choisissez l'un des 3 :
Si vous utilisez une des variantes de
HTML 4, ajoutez ceci avant votre contenu principal :<a name="startcontent"></a>Si vous utilisez une des variantes de
XHTML 1.0, ajoutez ceci avant votre contenu principal :<a name="startcontent" id="startcontent"></a>Si vous utilisez
XHTML 1.1, ajoutez ceci avant votre contenu principal :<a id="startcontent"></a>
Vous devriez inclure ce type d'évitement de lien sur toutes les pages de votre site Web, donc ajoutez le à tous vos gabarits.