Organiser les régions et les titres de la page

Une page peut sembler bien organisée à l’écran tout en restant difficile à parcourir avec un lecteur d’écran. Des blocs génériques et des titres mal hiérarchisés rendent plus difficile le repérage rapide des informations. Vous allez examiner la structure de la page de l’association et identifier le rôle de ses principales régions et de ses titres.

L’audit Lighthouse et les vérifications manuelles ont été présentés dans la leçon précédente. Ici, vous vous concentrez sur le plan sémantique du document : les régions qui organisent la page et les titres qui en exposent le contenu.

Repérer les régions de la page

Les éléments HTML tels que header, nav, main et footer décrivent la fonction de certaines zones. Ils donnent à la page des repères que les technologies d’assistance peuvent exposer sous forme de régions de navigation. Utilisez-les selon le rôle du contenu, plutôt que de construire toute la page avec des conteneurs génériques comme div.

Dans la page de l’association, header regroupe la marque, la navigation et l’action de newsletter. nav identifie le groupe de liens de navigation, tandis que main encadre le contenu principal. Les sections et l’article organisent ensuite les événements et la présentation de l’association ; footer contient les informations légales.

Construire une hiérarchie de titres

Les titres annoncent le sujet du contenu qui suit et rendent son plan perceptible. Sur cette page, h1 donne le sujet général : « Nos événements ». Le titre h2 « À venir » introduit la section des événements, et le h3 « Soirée des cultures » désigne l’annonce placée dans cette section.

La section « Notre association » est un autre sujet de premier niveau à l’intérieur du contenu principal : elle porte donc aussi un h2. Le niveau d’un titre traduit sa place dans le plan, pas sa taille visuelle. Si vous devez modifier l’apparence, faites-le dans la feuille de style prévue par le projet, sans choisir un niveau de titre pour obtenir un effet graphique.

Lire et vérifier le plan

Le plan de titres attendu pour le contenu principal est le suivant : h1 « Nos événements », puis h2 « À venir » et h3 « Soirée des cultures ». Après cette première section, h2 « Notre association » revient au même niveau que « À venir ». Cette organisation permet de comprendre que l’annonce est un élément de la section « À venir », et non une section indépendante de même niveau.

Pour contrôler le document, parcourez les titres dans leur ordre d’apparition et demandez-vous si chacun décrit le contenu qu’il introduit. Vérifiez également que les régions correspondent à des zones ayant une fonction identifiable. Les titres d’un formulaire ou d’une fenêtre de dialogue peuvent suivre leur propre contexte ; ils ne remplacent pas le plan des sections du contenu principal.

À retenir

• Employez les régions HTML pour décrire la fonction des grandes zones de la page.
• Réservez main au contenu principal et utilisez nav pour une zone de navigation.
• Organisez les titres selon le plan du contenu, sans sauter de niveau pour des raisons visuelles.
• Vérifiez que les titres décrivent le contenu qui suit et que les sections sont clairement nommées.

Dans la prochaine leçon, vous examinerez l’ordre source et son effet sur le parcours de tabulation.