Titre de niveau 1 - <header> - En-tête de la page
(LANDMARK : banner)
L'élément <header> représente un conteneur
pour le contenu introductif ou un ensemble de liens de
navigation. Il contient typiquement le logo, le titre principal
et les éléments d'identification du site.
Rôle landmark : banner - Uniquement au niveau
racine du document. Dans un article ou section, header est
structurant uniquement.
Titre de niveau 2 - <main> - Contenu principal (LANDMARK :
main)
L'élément <main> représente le contenu
principal du document. Il doit être unique dans la page et
contenir le contenu directement lié au sujet central du
document.
Rôle landmark : main - Doit être unique dans le
document.
Titre de niveau 3 - <section> - Section thématique
(STRUCTURANT ou LANDMARK : region)
L'élément <section> représente une
section générique d'un document, c'est-à-dire un
regroupement thématique de contenu, typiquement avec un
titre.
Rôle landmark : region - Uniquement avec
aria-labelledby ou aria-label. Ici
:
<section aria-labelledby="section-titre">
avec <h3 id="section-titre"> crée une
région landmark accessible.
Titre de niveau 3 - <article> avec <header>
et <footer> (STRUCTURANTS)
L'élément <header> dans un
<article> introduit le contenu de
l'article.
Pas de rôle landmark ici - structurant
uniquement.
L'élément <article> représente une
composition autonome dans un document, une page, une
application ou un site, destinée à être distribuée ou
réutilisée de manière indépendante (par exemple : un article
de blog, un commentaire, un widget).
Pas de rôle landmark - élément structurant
uniquement.
Titre de niveau 3 - <div role="region"
aria-label="..."> (LANDMARK : region)
N'importe quel élément peut devenir un landmark
region en ajoutant
role="region" et un nom accessible (aria-label
ou aria-labelledby).
Rôle landmark : region - Utile pour des
zones importantes qui n'ont pas d'élément sémantique
approprié.
Titre de niveau 3 - <div> et <span> (AUCUN RÔLE)
Les éléments <div> et
<span> n'ont
aucun rôle sémantique par défaut. Ils
servent uniquement au style et à la mise en page.
Pour leur donner un rôle, il faut ajouter explicitement un
attribut
role ARIA comme dans l'exemple ci-dessus.