retour vers le site AccessiWeb

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 ?

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

Valeur ajoutée pour le site

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

structure du menu incorrecte avec des sauts de lignes

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.

structure de menu correcte en liste et sous-listes

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 6.5 Fiche suivante : fiche 6.7

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