retour vers le site AccessiWeb

Guide AccessiWeb


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

Fiche 9.2 : La page web est-elle structurée de manière cohérente ?

Carte d'identité

  • Critère AccessiWeb : 9.2
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 3.5, 3.6
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 3 de WAI) : 13.8

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 les balises de type H1, H2, H3... H6 dans le code source.
  2. Si des listes sont présentes dans la page, vérifier qu'elles sont codées correctement : par l'usage des listes non ordonnées de type UL et LI, ou ordonnées de type OL, LI.

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) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "9. Structuration de l'information" de la Barre AccessiWeb, activer le critère 9.2.
  3. Une nouvelle fenêtre s'affiche présentant les balises H qui entourent chaque texte de la page structuré avec des balises d'en-têtes.
  4. Evaluer si les en-têtes ont été utilisés et si la hiérarchisation de ces en-têtes est respectée.
  5. Vérifier que la balise H1 n'est présente qu'une seule fois dans la page.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
  1. Cliquer sur le menu "Structure", puis sur l'option "Structure des en-têtes [Nouvelle fenêtre]".
  2. Ceci affiche une nouvelle fenêtre représentant la page avec des balises H qui entoureront chaque texte structuré avec des balises d'en-têtes.
  3. Evaluer si les en-têtes ont été utilisés et si la hiérarchisation de ces en-têtes est respectée.
  4. Vérifier que la balise H1 n'est présente qu'une seule fois dans la page.
    Note : Dans le même menu "Structure", il est également possible de choisir "En-têtes" qui insère les balises H autour du paragraphe où elles ont été codées.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :
  1. Activer l'option "Plan du document" du menu "Information".
  2. Ceci affiche une nouvelle fenêtre représentant la page avec des balises H qui entoureront chaque texte structuré avec des balises d'en-têtes.
  3. Evaluer si les en-têtes ont été utilisés et si la hiérarchisation de ces en-têtes est respectée.
  4. Vérifier que la balise H1 n'est présente qu'une seule fois dans la page.
    Note : Dans le menu "Entourer", il est également possible de choisir l'option "Entourer les titres (H1-H6)" qui entoure d'un liseret de couleur le paragraphe où ces balises ont été codées.

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Dès le chargement de la page, Jaws annonce le nombre de titres s'il y en a. Pour visualiser la hiérarchie des titres dans une page et évaluer si sa structure est cohérente :
  1. Taper simultanément sur les touches Insert+F6. Jaws dira : "aucun titre" si aucune balise de type H n'est présente. Si la page comporte des balises de titres de type Hn, Jaws fera alors apparaître une boîte de dialogue donnant la liste des titres présents sur la page mentionnant le niveau d'en-tête et sa position dans la page. Par exemple : Fiche 9.2 2 2" signifie que le titre "fiche 9.2" a un titre de niveau 2 et qu'il y a 2 titres dans la page.
  2. Visualiser les autres en-têtes de la page à l'aide des flèches du haut et du bas.
  3. Evaluer, en parcourant cette liste, si la hiérarchisation des en-têtes est respectée.
  4. Vérifier que la balise H1 n'est présente qu'une seule fois dans la page.
    Note : Il est possible de parcourir les en-têtes d'une page à l'aide de Jaws en tapant le chiffre du niveau d'en-têtes recherché. Ainsi, l'appui sur le chiffre 3 du clavier alphanumérique, (guillemet sans shift) permettra de se déplacer au titre de niveau 3 suivant l'en-tête sur lequel on se trouve. Si aucun en-tête de niveau 3 ne se situe en-dessous de l'en-tête de niveau 2 courant, Jaws dira "aucun en-tête de niveau 3 suivant". Pour revenir à l'en-tête de niveau 3 précédent il suffit d'appuyer sur la touche Shift+le guillemet du clavier alphanumérique.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

La bonne structuration d'une page doit être pensée dès la conception du site : c'est donc à la fois le travail du rédacteur de contenu qui pense à la hiérarchie des pages, mais aussi du développeur, qui insère le code approprié. Le graphiste peut également apporter un avis utile concernant la forme à donner aux titres : police, taille, couleur... Une fois que les spécifications graphiques ont été définies, elles peuvent être mises en oeuvre dans une feuille de style par le responsable technique du site.

Implémentation

  1. Dans chaque page Web il faut attribuer un style de titre de niveau H1 à l'information principale de la page. Par exemple, mettre le texte "bienvenue sur le site X ou Y" dans un style H1.
  2. Durant la conception de la page, il faut réfléchir à sa structure interne. Il faut s'imaginer que la page est un livre comprenant pour titre principal le texte qui a été mis entre les balises H1. Les chapitres, auxquels il faut attribuer un titre de niveau 2, peuvent être les titres de menus, les titres de rubriques. Les textes en niveau 3 peuvent être les sous-sections comme par exemple, les éléments de la rubrique "actualités", les titres des différentes nouvelles auront un H3.

Note 1 : Il est possible de faire une hiérarchie de titres allant du niveau H1 jusqu'au niveau H6. AccessiWeb recommande de n'utiliser qu'un seul titre de niveau 1 par page puisque c'est le H1 qui est référencé dans les moteurs de recherche.

Note 2 : Il est fortement déconseillé d'utiliser les balises H pour mettre un texte en forme. Par exemple, il faut éviter d'écrire "idées cadeaux" en H6 sous prétexte que le H6 permet d'écrire ce texte en gras, italique et police différente.

La structuration d'une page peut également être accomplie grâce à l'utilisation de listes de type UL et OL. Il est important de ne pas faire de blocs d'informations trop longs et de bien les séparer par des paragraphes.

Exemple de mauvaise pratique

<h2>Actualités</h2>
<h2>plan du site</h2>
<h2>moteur de recherche</h2>
<h4>contact</h4>
<h6>mentions légales</h6>

Dans cet exemple, la balise H1 est absente, d'une part, et l'on passe d'un niveau 2 à un niveau 4, sans qu'il y ait de niveau 3.

Exemple de bonne pratique

<h1>l'entreprise X : page d'accueil</h1>
<h2>Actualités</h2>
<h2>plan du site</h2>
<h2>moteur de recherche</h2>
<h2>divers</h2>
<h3>contact</h3>
<h3>mentions légales</h3>

Dans cet exemple, une seule balise H1 est utilisée. Elle constitue le titre du document. Il y a bien continuité entre les différents niveaux.

revenir en haut de la page

Illustrations

liste des en-têtes avec le lecteur d'écran Jaws

Affichage de la liste des titres par le lecteur d'écran Jaws pour le site AccessiWeb (www.accessiweb.org). Le premier chiffre après chaque titre indique son niveau (H1, à H6) et le second chiffre indique combien il y a de titres dans la page.

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.1 Fiche suivante : fiche 9.3

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