Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 9.2 : Dans chaque page Web, l'information est-elle structurée par l'utilisation appropriée de titres ?

revenir en haut de la page

Carte d'identité du critère 9.2 [niveau AccessiWeb : Argent]

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les pages Web doivent avoir leur information structurée par l'utilisation appropriée de titres.

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 un logiciel de traitement de texte 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

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester :
   • Identifier dans un navigateur graphique tous les titres servant à structurer les informations dans la page.
   • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants : balise h (exemple de code source : <h1>Titre principal de la page</h1>).
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 9.2.a [Argent] : Dans chaque page Web, y a-t-il un titre de niveau 1 (balise h1) ?
   • Test 9.2.b [Argent] : Dans chaque page Web, la hiérarchie entre les titres (balises h) est-elle pertinente ?
   • Test 9.2.c [Argent] : Dans chaque page Web, chaque titre (balise h) nécessaire à la structure de l'information est-il présent ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

• Pour le test 9.2.a [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir les structures des titres".
  3. Une nouvelle fenêtre apparaît et affiche le contenu des balises h.
  4. Vérifier que dans chaque page Web, il y a un titre de niveau 1 (balise h1).
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 9.2.b [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir les structures des titres".
  3. Une nouvelle fenêtre apparaît et affiche le contenu des balises h.
  4. Vérifier que dans chaque page Web, la hiérarchie entre les titres (balises h) est pertinente.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 9.2.c [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Identifier les éléments de titre dans la page Web.
  3. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir les structures des titres".
  4. Une nouvelle fenêtre apparaît et affiche le contenu des balises h.
  5. Vérifier que dans chaque page Web, chaque titre (balise h) nécessaire à la structure de l'information est présent
  6. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

• Pour le test 9.2.a [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Plan du document".
  3. Une nouvelle fenêtre apparaît et affiche le contenu des balises h.
  4. Vérifier que dans chaque page Web, il y a un titre de niveau 1 (balise h1).
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 9.2.b [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Plan du document".
  3. Une nouvelle fenêtre apparaît et affiche le contenu des balises h.
  4. Vérifier que dans chaque page Web, la hiérarchie entre les titres (balises h) est pertinente.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 9.2.c [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Identifier les éléments de titre dans la page Web.
  3. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Plan du document".
  4. Une nouvelle fenêtre apparaît et affiche le contenu des balises h.
  5. Vérifier que dans chaque page Web, chaque titre (balise h) nécessaire à la structure de l'information est présent
  6. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

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.

Note 2 : Il n'est pas possible d'utiliser les balises h pour mettre un texte en forme. Par exemple, il ne faut pas écrire "idées cadeaux" avec un niveau de titre h6 sous prétexte que le niveau de titre h6 permet d'écrire ce texte en gras, italique et police différente.

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

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 1.2) : Structural grouping
• html techniques for WCAG 1.0 (section 4) : list
• Plongez dans l'accessibilité : 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

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.