Mécanismes de navigation
Par Victor Brito, le jeudi 14 février 2008, à 15h00 - Catégorie Moyens techniques - Lien permanent
Il s'agit de s'assurer que des mécanismes de navigation clairs et cohérents soient fournies, de façon à ce que l'utilisateur trouve aisément ce qu'il cherche dans le site.
Il faut identifier clairement la cible de chaque lien. Un lien, une fois isolé de son contexte, peut devenir inintelligible, notamment lorsque l'utilisateur utilise un lecteur d'écran lui permettant de lister tous les liens contenus dans une page. Prenons l'exemple d'une page comportant le code suivant :
<p> <a href="mon-doc.html">Mon document est disponible en HTML</a> et en <a href="mon-doc.pdf">PDF</a>. Pour le format en texte plein, <a href="mon-doc.txt">cliquez ici</a>. </p>
Le lecteur d'écran restituera une liste de liens en disant : Mon document est disponible en HTML, PDF, cliquez ici
. Nous nous rendons vite compte que les liens ne sont pas compréhensibles, surtout les deux derniers. Par conséquent, pour le texte des liens, il faut éviter d'employer des expressions comme Cliquez ici
et expliciter la nature de la cible du lien. Si l'identification de la cible ne peut pas être concise (autrement dit, si elle excède grosso modo 80 caractères), l'attribut title permet une telle identification avec plus de précision. En reprenant l'exemple donné plus haut, cela donne :
<p> <a href="mon-doc.html">Mon document est disponible en HTML</a>, en <a href="mon-doc.pdf" title="Mon document en PDF">PDF</a> et en <a href="mon-doc.txt" title="Mon document en texte plein">texte plein</a>. </p>
Il faut ajouter des métadonnées pour fournir des renseignements d'ordre sémantique aux pages et au site. En HTML, on n'oublie pas d'insérer un élément title indiquant l'intitulé de la page consultée, ainsi que des éléments fournissant des renseignements précieux comme le type de contenu, le tout devant être situé dans l'élément head.
<head> <title>Intitulé du document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Victor Brito" /> <meta name="generator" content="Nom de l'outil utilisé pour générer le document" /> </head>
Il faut fournir des renseignements sur la mise en forme générale du site, comme un plan du site ou une table des matières, ce qui, soit dit en passant, facilite l'indexation du site par les robots des moteurs de recherche. C'est là qu'on mettra en valeur et expliquera les options d'accessibilité disponibles.
Les mécanismes de navigation doivent être utilisés de façon cohérente. On s'assurera, par exemple, que certaines structures, comme les barres de navigation, les blocs de contenu et les blocs d'avertissement se trouvent au même endroit, quelle que soit la page consultée.
Des barres de navigation doivent être fournies pour mettre en valeur les mécanismes de navigation et permettre leur accès.
Lorsque plusieurs liens sont de même nature, il faut les regrouper, identifier le groupe et s'assurer que l'on puisse l'éviter. Certains utilisateurs, notamment les non-voyants, prennent connaissance des liens les uns après les autres. L'utilisation d'un ou de plusieurs groupes de liens peut signifier que ces derniers sont en grand nombre. Si l'utilisateur veut accéder à un lien situé en dehors de ce groupe, il faut prévoir un lien d'évitement qui lui permettra d'accéder plus rapidement au lien voulu. L'exemple ci-après illustre le propos :
<map id="navigation" title="Barre de navigation">
<p>
[<a href="#comment">Sortir de la barre de navigation</a>]
[<a href="accueil.html">Accueil</a>]
[<a href="recherche.html">Recherche</a>]
[<a href="nouvelles.html">Nouvelles</a>]
[<a href="plan.html">Plan du site</a>]
</p>
</map>
<h1><a id="comment">Comment utiliser notre site</a></h1>
Si des fonctions de recherche sont prévues, il convient de rendre possible plusieurs types de recherche en fonction de préférences.
Il convient de placer des renseignements distincts au début des en-têtes, des paragraphes, des listes… Ils sont utiles aux utilisateurs de synthèses vocales. Autrement dit, il convient de placer le sujet de la phrase ou du parapraphe au début de ces derniers.
Il convient de fournir des renseignements lorsqu'un document comprend plusieurs pages. En HTML, on emploie l'élément link avec les attributs rel et rev pour expliciter les relations entre les pages. Cela peut améliorer le temps de chargement, en ce sens que les navigateurs peuvent « précharger » les pages indiquées dans les éléments link sans que l'utilisateur ait demandé à les consulter (même s'il peut éventuellement le faire), ce qui est pratique pour les utilisateurs utilisant une connexion lente ou naviguant lentement. Prenons l'exemple d'un livre en ligne ouvert au chapitre 2 ; on pourra établir les relations suivantes :
<link rel="next" href="chapitre-3.html" /> <link rel="prev" href="chapitre-1.html" /> <link rel="start" href="couverture.html" /> <link rel="contents" href="table-des-matieres.html" />
L'attribut rev joue un rôle complémentaire de l'attribut rel ; autrement dit, pour deux documents A et B, <link href="document-b.html" rel="document" /> dans A aura la même signification que <link href="document-a.html" rev="document" /> dans B.
Enfin, il convient de fournir un moyen de sauter un art ASCII qui s'étend sur plusieurs lignes, comme dans l'exemple suivant.
<p><a href="#post-art">Sauter l'art ASCII</a></p>
<pre>
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
</pre>
<p><a id="post-art">Fréquence de flash (en hertz)</a></p>
