# Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Liens > Fiche 6.6

## Fiche 6.6 : Dans l'arborescence du site, y a t-il un maximum de 9 catégories par niveau de navigation ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 6.6
- Niveau AccessiWeb : or
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 3 de WAI) : 14.3

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

- Bénéfice 1 :
  Une "catégorie" est un ensemble de 1 à 9 liens.
  Pour une majorité d'utilisateurs découvrant le site, neuf éléments semblent être, selon certaines études, le chiffre limite au-delà duquel l'esprit humain mémorise difficilement les informations.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  L'application de ce critère peut contribuer à alléger le poids des pages grâce à un meilleur découpage des rubriques présentes dans le site et leur répartition sur plusieurs pages.

revenir en haut de la page

### Comment évaluer

#### Par le code source

Ce critère n'est pas évaluable par le code source.

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

Le graphiste et les personnes en charge du contenu doivent veiller au respect de ce critère.

#### Implémentation

Si dans un même niveau de navigation le nombre de rubriques est supérieur à 9, envisager un découpage supplémentaire en sous rubriques. On peut, par exemple, se servir des éléments de liste qui peuvent éventuellement être imbriqués.

#### Exemple de mauvaise pratique

L'extrait de code qui suit est celui d'un menu où chaque élément est un lien. Il y a un découpage en rubriques principales, puis en sous-rubriques. Or, Tous ces liens sont mis à la suite l'un de l'autre, sans distinction visuelle.

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

#### Exemple de bonne pratique

Une solution possible à l'exemple précédent est un découpage plus fin à l'aide de sous-listes. Pour répondre parfaitement au critère, le lien "contact" de la rubrique "services" qui comporte 10 éléments, a été reporté en dehors du menu. Ce choix est bien sûr arbitraire et d'autres découpages sont certainement envisageables.

<ul id="nav">
<li><a href="/">accueil</a></li>
<li><a href="#">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><a href="#">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><a href="#">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><a href="#">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><a href="#">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><a href="#">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

La structure du menu est incorrecte : les rubriques de niveau 1 sont des points de liste mais les rubriques de niveau 2 sont des liens séparés par des sauts de lignes à l'intérieur d'un point de liste. La conséquence pour l'utilisateur est que le menu se compose d'un intitulé et d'une suite de 5 à 10 liens par point de la liste.

Le menu est correctement structuré : les rubriques de niveau 1 appartienent à une seule et même liste, les rubriques de niveau 2 sont des listes ouvertes après un point de niveau 1 et refermées avant le point de niveau suivant.

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.8 : La page fait-elle moins de 70 Ko ?
- Fiche 13.13 : La page fait-elle au maximum 3 écrans en résolution 1024*768 si aucune navigation interne n'est prévue ?

#### Autres ressources

- Web Content Accessibility Curriculum (section 13.6) Group related links
- York UniversityThe magical number seven, plus minus 2
- Discussion sur la pertinence du nombre magique (page en anglais)

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