Fiche: La structure de page globale
La structure globale d'une page doit être définie avec des balises et des rôle ARIA de type "Landmarks".
Les Landmarks sont des éléments sémantiques qui définissent les différentes parties logiques et fonctionnelles d'une page.
Le W3C définit les Landmarks comme :
Une typologie de régions d'une page vers laquelle un utilisateur pourrait vouloir accéder rapidement. Le contenu dans ces régions est différent du contenu dans d'autres régions de la page et correspond à des besoins spécifiques de l'utilisateur telles que la navigation, la recherche, l'accès évident au contenu primaire de la page, etc.
En termes d'accessibilité numérique, les Landmarks sont un moyen facile de navigation dans une page et de compréhension de la structure sémantique de cette page. Ce sont des éléments obligatoires.
D'après les résultats une étude de WebAIM sur l'utilisation des lecteurs d'écran (9ème édition), plus de la moitié des utilisateurs de lecteur d'écran s'appuient - à des degrès divers - sur les Landmarks pour naviguer sur les sites Web.
Les balises / rôles correspondants à des Landmarks sont :
- Header (role = banner)
- Utilisé pour identifier l'entête de la page qui devrait contenir le logo, la navigation et la recherche. Lorsque l'élément <header> n'est pas utilisé comme enfant de la balise <main> (ou de tout autre élément de section), le rôle de bannière lui est assigné.
- Main (role = main)
- C'est le contenu principal de la page. Il est important de noter que chaque page ne doit posséder qu'un seul élément <main>.
- Footer (role = contentinfo)
- Utilisé popur identifé les informations à propos de la page, tels que les informations légales, la déclaration d'accessibilité, etc. Dans la majorité des cas c'est le pied de page.
- Search
- Utilisé pour regrouper un ensemble d'éléments cohérent pour former la fonction de recherche dans le site. Sa forme la plus évidente est d'utiliser un formulaire spécifique avec une zone simple de saisie.
- Article / section (role region)
- La zone principale de contenu peut (devrait) être constitué de différents types de contenus ou régions.
- Nav (role = navigation)
- Utilisé pour indentifier une série de liens qui permettent à l'utilisateur de navigiuer au travers des pages du site ou dans la page elle-même. Cela peut inclure des éléments telle qu'une navigation annexes (sidebar), la barre / menu de navigation du site ou un ensemble de lien dans le pied de page.
- Aside (role complementary)
- Contenu complémentaire du contenu principal (main).
- Form
- Utilisé pour identifier un formulaire.
Structure
Cet exemple de squelette sémantique devrait être utilisé comme modèle de base pour tous les types de pages.
[Header] [nav] [search] [main] [h1] [aside] [article] [h2] ... [article] [h2] [section] [h3] [form] [section] [h3] [section] [h3] [footer] [article] [h2] [section] [h3] [liste] [section] [h3] [liste] [section] [h3] [liste]