retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Structuration de l'information > Fiche 9.3

Fiche 9.3 : Y a-t-il un plan du site ?

Carte d'identité

  • Critère AccessiWeb : 9.3
  • Niveau AccessiWeb : argent
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 13.3

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

revenir en haut de la page

Comment évaluer

Par le code source

  1. Rechercher l'occurrence "plan du site" (ou "site map"). Celle-ci peut correspondre, soit à l'intitulé d'un lien, soit à l'alternative textuelle de l'élément graphique représentant ce lien.

Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

Evaluer avec la barre AccessiWeb (version 1.0) :

Ce critère n'est pas évaluable par la barre AccessiWeb.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Ce critère n'est pas évaluable par la barre d'accessibilité AIS version 1.2 pour IE.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :
Ce critère n'est pas évaluable par la barre d'outils Web Developer version 1.0.2 pour Firefox.

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

Les personnes en charge du contenu doivent intégrer ce critère dès la conception du site.

Implémentation

Géré de manière statique ou dynamique, l'affichage des liens de navigation du site doit être organisé sous la forme d'une liste de liens explicites.

Le plan du site doit être constitué d'un ensemble de liens hypertextes concis, précis et lisibles hors contexte (liens textuels ou liens images bien commentés). Ceux-ci peuvent être agencés sous forme d'une table des matières. Classés par niveaux et / ou par thèmes, ils donneront un aperçu utile de l'apparence générale de l'arborescence du site. Une numérotation appropriée des différents liens est un plus non négligeable.

Le plan du site doit être structuré de manière à refléter l'organisation interne des rubriques global du site. Afin de rendre cette liste de liens (parfois longue) plus confortable en terme d'accessibilité, il est conseillé d'utiliser des éléments de titre (balises H) et/ou des éléments de liste (balises UL et LI) pour hiérarchiser et clarifier la présentation des liens pour les utilisateurs qui n'ont pas une vision globale de l'écran.

Deux cas de figure pour implémenter ce type de page dans un site :

  1. Le site présente un nombre de pages réduit. Le menu de navigation est souvent équivalent aux liens constitutifs de la page plan de site. Cette page peut alors être organisée à l'identique et sans mise en forme particulière, mais pourra sembler redondante par rapport à la navigation en place.
  2. Le site est trop volumineux pour que toute son organisation soit représentée dans le seul menu de navigation. Le plan du site gagnera alors en clarté s'il est présenté "en relief" avec une mise en avant claire du rubriquage et de la variété des pages. Couplée à un outil de recherche externe ou interne au site, la navigation rapide, sur un vaste site, sera optimisée.

Exemple de mauvaise pratique

Voici un long menu d'une page d'accueil qui, bien que structuré, ne contient pas de lien vers un plan du site. Une telle page permettrait de mieux expliciter ce que signifie chaque lien du menu, par exemple.

<ul class="nav">
<li><a href="/" class="menu accueil">accueil</a></li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu actualite">actualité</a><ul>
<li><a href="/page.php?Rubrique=MONDE">monde</a></li>
<li><a href="/page.php?Rubrique=TERRE">terre</a></li>
<li><a href="/page.php?Rubrique=POLITIQUES">politiques</a></li>
<li><a href="/page.php?Rubrique=SOCIETE">société</a></li>
<li><a href="/page.php?Rubrique=ECONOMIE">économie</a></li>
<li><a href="/page.php?Rubrique=MEDIAS">médias</a></li>
<li><a href="/page.php?Rubrique=SPORTS">sports</a></li>
<li><a href="/page.php?Rubrique=SCIENCES">sciences</a></li>
<li><a href="/page.php?Rubrique=MULTIMEDIA">multimédia</a></li>
</ul>
</li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu interactif">interactif</a><ul>
<li><a href="/page.php?Template=FORUMS_HP">forums</a></li>
<li><a href="/page.php?Rubrique=BLOGS">blogs</a></li>
<li><a href="/page.php?Rubrique=CHAT">chats</a></li>
<li><a href="/page.php?Rubrique=COURRIER">courrier</a></li>
<li><a href="/newsletter/">newsletters</a></li>
<li><a href="/page.php?Article=149907">rss</a></li>
</ul>
</li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu culture">culture</a><ul>
<li><a href="/page.php?Rubrique=CULTURE">à la une</a></li>
<li><a href="/page.php?Rubrique=CINEMA">cinéma</a></li>
<li><a href="/page.php?Rubrique=LIVRES">livres</a></li>
<li><a href="/page.php?Rubrique=MUSIQUE">musiques</a></li>
<li><a href="/page.php?Rubrique=AGENDA">sortir</a></li>
<li><a href="/page.php?Rubrique=TELEVISION">télévision</a></li>
<li><a href="/page.php?Rubrique=JEUXVIDEO">jeux vidéo</a></li>
<li><a href="/page.php?Rubrique=TENTATIONS">tendances</a></li>
<li><a href="/page.php?Rubrique=DIGITALES">digitales</a></li>
</ul>
</li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu opinion">opinions</a><ul>
<li><a href="/page.php?Rubrique=REBONDS">rebonds</a></li>
<li><a href="/page.php?Rubrique=WEEKEND">chroniques</a></li>
<li><a href="/page.php?Template=FORUMS_HP">forums</a></li>
<li><a href="/page.php?Rubrique=COURRIER">courrier</a></li>
</ul>
</li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu vous">vous</a><ul>
<li><a href="/page.php?Rubrique=VOUS#alaune">à la une</a></li>
<li><a href="/page.php?Rubrique=VOUS#sante">santé</a></li>
<li><a href="/page.php?Rubrique=VOUS#education">éducation</a></li>
<li><a href="/page.php?Rubrique=VOUS#logement">logement</a></li>
<li><a href="/page.php?Rubrique=VOUS#internet">internet</a></li>
<li><a href="/page.php?Rubrique=EMPLOI">emploi</a></li>
</ul>
</li>
<li><a href="/page.php?Rubrique=VOYAGES" class="menu voyages">voyages</a></li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu services">services</a><ul>
<li><a href="/" target="_rencontres">rencontres</a></li>
<li><a href="/meteo/" target="meteo">météo </a></li>
<li><a href="/finance/" target="bourse">bourse</a></li>
<li><a href="/annonces/formation.php">formation</a></li>
<li><a href="/immo/">immobilier</a></li>
<li><a href="/annonces/index.php#carnet">carnet</a></li>
<li><a href="/annonces/index.php#entrenous">entre nous</a></li>
<li><a href="/emploi/recherche.php" target="emploi">emploi </a></li>
<li><a href="/" target="abo">abonnements</a></li>
</ul>
</li>
</ul>
<p><a href="/courrier/">contacts</a></p>

Exemple de bonne pratique

En reprenant le menu précédent, on peut ajouter un lien vers un plan du site, soit

dans la rubrique "services", mais dans ce cas il faut en retirer un élément pour respecter le critère 6.6, soit dans la rubrique "interactif". Dans l'idéal, ce lien "plan du site" doit apparaître le plus tôt possible dans le code source afin que les personnes aveugles, contraintes à une lecture linéaire, y aient accès très vite.

<ul class="nav">
<li><a href="/" class="menu accueil">accueil</a></li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu actualite">actualité</a><ul>
<li><a href="/page.php?Rubrique=MONDE">monde</a></li>
<li><a href="/page.php?Rubrique=TERRE">terre</a></li>
<li><a href="/page.php?Rubrique=POLITIQUES">politiques</a></li>
<li><a href="/page.php?Rubrique=SOCIETE">société</a></li>
<li><a href="/page.php?Rubrique=ECONOMIE">économie</a></li>
<li><a href="/page.php?Rubrique=MEDIAS">médias</a></li>
<li><a href="/page.php?Rubrique=SPORTS">sports</a></li>
<li><a href="/page.php?Rubrique=SCIENCES">sciences</a></li>
<li><a href="/page.php?Rubrique=MULTIMEDIA">multimédia</a></li>
</ul>
</li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu interactif">interactif</a><ul>
<li><a href="/page.php?Template=FORUMS_HP">forums</a></li>
<li><a href="/page.php?Rubrique=BLOGS">blogs</a></li>
<li><a href="/page.php?Rubrique=CHAT">chats</a></li>
<li><a href="/page.php?Rubrique=COURRIER">courrier</a></li>
<li><a href="/newsletter/">newsletters</a></li>
<li><a href="/page.php?Article=149907">rss</a></li>
<!-- insertion d'un lien vers le plan du site -->
<li><a href="/plan/">plan du site</a></li>
</ul>
</li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu culture">culture</a><ul>
<li><a href="/page.php?Rubrique=CULTURE">à la une</a></li>
<li><a href="/page.php?Rubrique=CINEMA">cinéma</a></li>
<li><a href="/page.php?Rubrique=LIVRES">livres</a></li>
<li><a href="/page.php?Rubrique=MUSIQUE">musiques</a></li>
<li><a href="/page.php?Rubrique=AGENDA">sortir</a></li>
<li><a href="/page.php?Rubrique=TELEVISION">télévision</a></li>
<li><a href="/page.php?Rubrique=JEUXVIDEO">jeux vidéo</a></li>
<li><a href="/page.php?Rubrique=TENTATIONS">tendances</a></li>
<li><a href="/page.php?Rubrique=DIGITALES">digitales</a></li>
</ul>
</li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu opinion">opinions</a><ul>
<li><a href="/page.php?Rubrique=REBONDS">rebonds</a></li>
<li><a href="/page.php?Rubrique=WEEKEND">chroniques</a></li>
<li><a href="/page.php?Template=FORUMS_HP">forums</a></li>
<li><a href="/page.php?Rubrique=COURRIER">courrier</a></li>
</ul>
</li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu vous">vous</a><ul>
<li><a href="/page.php?Rubrique=VOUS#alaune">à la une</a></li>
<li><a href="/page.php?Rubrique=VOUS#sante">santé</a></li>
<li><a href="/page.php?Rubrique=VOUS#education">éducation</a></li>
<li><a href="/page.php?Rubrique=VOUS#logement">logement</a></li>
<li><a href="/page.php?Rubrique=VOUS#internet">internet</a></li>
<li><a href="/page.php?Rubrique=EMPLOI">emploi</a></li>
</ul>
</li>
<li><a href="/page.php?Rubrique=VOYAGES" class="menu voyages">voyages</a></li>
<li onmouseover="MenuDisplay(this)" onmouseout="MenuHide(this)"><a href="#" class="menu services">services</a><ul>
<li><a href="/" target="_rencontres">rencontres</a></li>
<li><a href="/meteo/" target="meteo">météo </a></li>
<li><a href="/finance/" target="bourse">bourse</a></li>
<li><a href="/annonces/formation.php">formation</a></li>
<li><a href="/immo/">immobilier</a></li>
<li><a href="/annonces/index.php#carnet">carnet</a></li>
<li><a href="/annonces/index.php#entrenous">entre nous</a></li>
<li><a href="/emploi/recherche.php" target="emploi">emploi </a></li>
<li><a href="/" target="abo">abonnements</a></li>
</ul>
</li>
</ul>
<p><a href="/courrier/">contacts</a></p>

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 9.2 Fiche suivante : fiche 9.4

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact