# 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 ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### 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

- Bénéfice 1 :
  Dans le cas des utilisateurs à mobilité réduite, la navigation à l'aide du plan du site est parfois plus efficace ergonomiquement que les menus de navigation eux-mêmes. Cette remarque vaut particulièrement pour les menu de navigation en DHTML inutilisables car difficilement contrôlables par de nombreux déficients moteurs.
- Bénéfice 2 :
  Un plan du site bien conçu et couplé à un moteur de recherche favorise l'accès rapide à l'information pour tout le monde. Le plan du site doit pouvoir être consultable de manière équivalente sur toutes les pages du site.
  Le plan du site oriente l'utilisateur et lui offre une "bouée de sauvetage" lorsqu'il est perdu. En plus de son aspect "orientant", il donne à l'utilisateur une idée globale du contenu de chaque rubrique ainsi que de la taille du site lui-même.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  La présence d'une page de ce type permet au responsable du site de représenter de manière synthétique l' architecture et de rationaliser l'ensemble des contenus qui le composent.

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

- Fiche 9.2 : La page web est-elle structurée de manière cohérente ?
- Fiche 12.1 : La navigation dans l'ensemble des pages du site est-elle cohérente ?
- Fiche 12.5 : Les liens importants du site comportent-ils des raccourcis claviers ?
- Fiche 12.6 : Si des raccourcis clavier ont été définis dans le site, sont-ils actifs dans la page ?

#### Autres ressources

- Web Content Accessibility Curriculum (section 13.3 : Provide information about the general layout of a site (a site map)

revenir au sommaire de la fiche

revenir en haut de la page

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