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.
Rechercher les balises de type H1, H2, H3... H6 dans le code source.
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) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "9. Structuration de l'information" de la Barre AccessiWeb, activer le critère 9.2.
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.
Evaluer si les en-têtes ont été utilisés et si la hiérarchisation de ces en-têtes est respectée.
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) :
Cliquer sur le menu "Structure", puis sur l'option "Structure des en-têtes [Nouvelle fenêtre]".
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.
Evaluer si les en-têtes ont été utilisés et si la hiérarchisation de ces en-têtes est respectée.
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) :
Activer l'option "Plan du document" du menu "Information".
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.
Evaluer si les en-têtes ont été utilisés et si la hiérarchisation de ces en-têtes est respectée.
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 :
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.
Visualiser les autres en-têtes de la page à l'aide des flèches du haut et du bas.
Evaluer, en parcourant cette liste, si la hiérarchisation des en-têtes est respectée.
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.
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
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.
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.
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.