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

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

- Bénéfice 1 :
  La structuration d'une page Web par l'intermédiaire des balises `H` permet aux utilisateurs qui ne voient pas le texte à l'écran de mieux identifier les différents blocs d'information et la relation des différents textes les uns par rapport aux autres. Alors qu'un utilisateur voyant l'écran peut rapidement repérer un titre de page parce qu'il est écrit en plus gros, dans une autre couleur, en gras ou dans un autre style, ces changements de présentation ne sont pas identifiables pour les utilisateurs qui ne voient pas l'écran.
  En revanche, la structuration de la page par le code permet aux utilisateurs non voyants de se constituer une table des matières du contenu de la page.
  On peut comparer cette fonctionnalité à la table des matières constituée par le logiciel Microsoft Word lorsque les styles automatiques sont utilisés pour marquer les différents chapitres et sections d'un document. Si le concepteur du document n'a pas attribué de styles automatiques de type titre 1, titre 2..., à ses différentes parties, le logiciel sera incapable de générer automatiquement une table des matières.
  Par contre, si des styles automatiques ont été attribués, la table des matières pourra être obtenue à tout moment.
- Bénéfice 2 :
  Avec une page Web structurée, les utilisateurs pourront rapidement accéder à une section de la page grâce à une fonctionnalité spécifique de leur navigateur ou de leur aide technique. Ils pourront comprendre comment la page est organisée. Cela permettra d'accélérer leur mode de navigation et d'effectuer une lecture plus rapide du contenu de la page.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  L'utilisation de balises de structure de type `H1` dans une page Web permet aux moteurs de recherche de mieux référencer cette page.
- Bénéfice 2 :
  Cela permet également à tout développeur étant amené à travailler sur cette page, de comprendre comment un autre développeur l'a organisée.

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

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

- Fiche 9.1 : Est-ce que la structuration de l'information est cohérente par rapport au contexte général du site ?"
- Fiche 10.1 : Le contenu de la page est-il séparé de sa présentation ?
- Fiche 13.8 : La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ?

#### Autres ressources

- html Techniques (section 1.2) : Structural grouping
- html Techniques (section 4) : list
- Plongez dans l'accessibilité (jour 27) : Utilisez de vraies en-têtes
- blog-and-blues.org : Perception de la structure d'une page Web par un handicapé visuel
- tecfa.unige.ch : Aborder HTML : ce n'est pas un traitement de texte
- opera.com (section "document navigation") : Using Opera without a mouse

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