Régions HTML

Les régions HTML sont importantes pour structurer le corps de son document.

Qu’est-ce qu’une région ?

Le HTML 5 a introduit des éléments de région (landmark, en anglais}). Ces régions sont très utiles aux utilisateurs de logiciels de synthèse vocale car elles leur permettent de passer d’un zone à une autre et de mieux comprendre la structure du document.

Les éléments de régions HTML définissent par défaut des rôles ARIA ([Accessible Rich Internet Applications]{lang=“en”} - spécification du WCAG pour rendre les applications Internet compatibles avec les technologies d'assistance).

Les régions HTML et leur rôle spécifique

Certaines régions ont un rôle aria bien spécifique qui détermine aussi leur cas d’usage. Dans certains cas, il est nécessaire de surchargé la balise sémantique par son rôle aria.

Régions HTML et rôle
Élément HTML	Rôle aria associé	Utilisation
`header`	`banner`	`<header role="banner">` doit être utilisé pour l'entête principale du site. Lorsque l'élément `header` est contenu dans des éléments `article`, `aside`, `main`, `nav`, `section`, il ne doit pas avoir de rôle aria.
`main`	`main`	`<main role="main">` doit être utilisé pour le contenu principal de la page. Si la balise `main` peut être utilisée plusieurs fois dans une page web, la balise avec le `role="main"` ne peut être employée qu’une seule fois.
`footer`	`contentinfo`	`<footer role="contentinfo">` doit être utilisé pour le pied de page de la page. Lorsque l'élément `footer` est contenu dans des éléments `article`, `aside`, `main`, `nav`, `section`, il ne doit pas avoir de rôle aria.
`nav`	`navigation`	`<nav role="navigation">` doit toujours être utilisé tel quel pour identifier un système de navigation interne au site.
`search`	`search`	`<search role="search">` doit toujours être utilisé tel quel pour identifier le formulaire de recherche globale dans le site. Avant mars 2023, cet élément `search` n'existait pas. Pour identifier un formulaire de recherche sur tout le site, on utilisait `<form role="search">`.
`aside`	`complementary`	`<aside>` Le rôle `complementary` implicite n'a pas besoin d'être renseigné. Il est recommandé de donner un nom à cette région via l'attribut `aria-label` :`<aside aria-label="Catégories">`.
`section`	`region`	`<section>` Le rôle `region` implicite ne doit pas être renseigné. La balise ouvrante `section` doit toujours être suivie d'une balise de titraille (`h1`, `h2`, ..., `h6`) ou avoir un attribut de titre (`title` ou `aria-label`). `<section title="Derniers articles">` ou `<section><h3>Derniers articles</h3>...`