Guide AccessiWeb

Accueil
Mode d'emploi
Structure d'une fiche
Fiches AccessiWeb
- 1) Images
- 2) Cadres
- 3) Couleurs
- 4) Multimédia
- 5) Tableaux
- 6) Liens
- 7) Code exécutable
- 8) Eléments obligatoires
- 9) Structuration de l'information
- 10) Présentation de l'information
- 11) Formulaires
- 12) Navigation
- 13) Consultation
Glossaire
Aide à l'évaluation
Référentiel AccessiWeb
Tables de correspondance
Moteur de recherche
Références
Remerciements
Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Structuration de l'information > Critère 9.4

Critère 9.4 : Dans le site Web, y a-t-il une page "plan du site" ?

Sommaire de la fiche :

Carte d'identité
Comprendre

Comment évaluer
Comment mettre en oeuvre

Illustrations
Références

revenir en haut de la page

Carte d'identité du critère 9.4 [niveau AccessiWeb : Argent]

Test(s) AccessiWeb permettant de vérifier le critère 9.4

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

Test 9.4.a [Argent] : Dans le site Web, y a-t-il une page "plan du site" ?

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Fiche du critère 9.5 : Dans chaque page Web, la page "plan du site" est-elle atteignable de manière identique ?

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

Référentiel AccessiWeb 1.0 (19/12/2003) [version utilisée dans le Référentiel Accessibilité ADAE 2004] : 9.3 [Argent]
WCAG 1.0 (05/05/1999) : 13.3 [P2]
UWEM 1.0 (05/07/2006) : 13.3_HTML_01 [P2]
WCAG 2.0 (30/04/2008) : 2.4.5 [AA], 2.4.8 [AAA]
mobileOK 1.0 (02/11/2006) : pas de correspondance.
RGAA : pas de correspondance (aucune version datée du RGAA n'est disponible en ligne à la date de publication de ce guide).

revenir en haut de la page

Comprendre

Comprendre le critère

Un site Web doit avoir une page "plan du site".

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 menus de navigation en DHTML inutilisables car difficilement contrôlables par de nombreux internautes 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

La présence d'une page de plan du site permet au responsable de représenter de manière synthétique l' architecture du site et de rationaliser l'ensemble des contenus qui composent le site.

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

Sélectionner le(s) élément(s) à tester : Identifier dans un navigateur graphique le mécanisme qui permet d'accéder à la page "plan du site". Consulter le contenu de cette page.
Appliquer le(s) test(s) suivant(s) :
- Test 9.4.a [Argent] : Dans le site Web, y a-t-il une page "plan du site" ?
Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

Pour le test 9.4.a [Argent] :

Ce test n'est pas évaluable par la Barre d'outils Accessibilité du Web (version 2.0 beta).

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

Pour le test 9.4.a [Argent] :

Ce test n'est pas évaluable par la Barre d'Outils Web Developper (version 1.1.4).

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

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 :

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.
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", 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>

<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

WAI 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