Structurer une page avec les régions (landmarks) ARIA

Composant

Date de parution 05 septembre 2025

Mise à jour de l'article du 15 janvier 2018

Préambule

Dans cet article, nous allons voir comment améliorer la navigation dans une page web en structurant son contenu de manière programmatique grâce à l'utilisation d'éléments sémantiques HTML.

Cette structure va permettre aux utilisateurs qui naviguent à l'aide d'une assistance technique (exemple : lecteur d'écran) ou uniquement au clavier de pouvoir, via leurs outils d'assistance, se faire une représentation du contenu de la page sans avoir besoin de la parcourir. Cela représente donc un gain notable de temps et d'énergie.

L'utilisation de ces éléments sémantiques constitue une bonne pratique, qu'il est fortement conseillé d'appliquer dans toutes les pages web compte tenu de la facilité de sa mise en oeuvre et du confort de navigation qu'elle procure.

À noter : Cette bonne pratique n'est pas une obligation édictée par les WCAG. Elle peut cependant le devenir dans le cadre plus large du critère 2.4.1 "Bypass Blocks (Level A)". Pour en savoir plus sur sa mise en oeuvre, voir Technique ARIA11: Using ARIA landmarks to identify regions of a page.

Théorie

Pour ajouter de la sémantique HTML au contenu d'une page, 2 possibilités :

Pour une page en HTML5 (recommandé) : utiliser les balises sémantiques (main, header, footer, aside, etc.) qui y ont été introduites. Ces balises peuvent être utilisées seules, sans les rôles ARIA correspondants, car leur support est bon dans la grande majorité des navigateurs et des aides techniques.


    <head>
      […]
      <title>Titre de la page</title>
      […]
    </head>

    <body>
      <header>
        <img>logo</img>
        <h1>Nom de l'application</h1>
        <nav>…navigation…</nav>
        […]
      </header>

      <main>
        <nav aria-label="Fil d’Ariane">[…]</nav>
        <section>
          <h1>Actualités</h1>
          <p> 21 juin 2025 - Fête de la musique</p>
          <p>…contenu de la section…</p>
        </section>
        <article>
          […]
        </article>
        […]
      </main>

      <aside>
        <p>…contenu annexe en relation avec le contenu principal…</p>
        […]
      </aside>

      <footer>
        <p>…contenu du pied de page : copyright…</p>
        […]
      </footer>
    </body>

Pour une page qui n'est pas en HTML5 : ajouter des régions (landmarks) ARIA.


      <head>
        […]
        <title>Titre de la page</title>
        […]
      </head>

      <body>
        <div role="banner">
          <img>logo</img>
          <h1>Nom de l'application</h1>
          <div role="navigation">…navigation…</div>
          […]
        </div>

        <div role="main">
          <div role="navigation" aria-label="Fil d’Ariane">[…]</nav>
          <div role="region">
            <h1>Actualités</h1>
            <p> 21 juin 2025 - Fête de la musique</p>
            <p>…contenu de la région…</p>
          </div>
          <div role="article">
            […]
          </div>
          […]
        </div>

        <div role="complementary">
          <p>…contenu annexe en relation avec le contenu principal…</p>
          […]
        </div>

        <div role="contentinfo">
          <p>…contenu du pied de page : copyright…</p>
          […]
        </div>
      </body>

Correspondance entre les balises HTML5 et les régions (landmarks) ARIA


Balises HTML5	Régions ARIA
`header`	`role="banner"` seulement dans certains cas (voir Usages ci-dessous)
`nav`	`role="navigation"`
`search - pas de balise HTML5`	`role="search"`
`main`	`role="main"`
`form`	`role="form"`
`section`	`role="region"`
`aside`	`role="complementary"`
`footer`	`role="contentinfo"` seulement dans certains cas (voir Usages ci-dessous)

Usages

La balise header (ou l'attribut de région ARIA role="header") permet d'identifier l’en-tête de la page. Cela est vrai uniquement si cet élément est placé dans une balise body, soit comme enfant direct, soit dans une balise HTML autre que article, aside, main, nav et section.

De manière générale et pour simplifier, il est conseillé d'utiliser la balise header (ou l'attribut de région ARIA role="header") une seule fois par page.

nav

La balise nav (ou l'attribut attribut de région ARIA role="navigation") permet d’identifier les principaux éléments de navigation internes au site.

Il est conseillé d'utiliser au maximum 3 balises nav (ou role="navigation") dans une même page.

Lorsque plusieurs nav sont utilisées, chacune doit avoir un nom accessible unique qui permettra de les identifier (voir Bonnes pratiques).

role="search"

L'attribut de région ARIA role="search" (pas de balise HTML équivalente) est à utiliser pour identifier un formulaire de recherche dans le site ou pour filtrer du contenu présent dans la page.

main

La balise main (ou l'attribut de région ARIA role="main") permet d'identifier le contenu principal de la page.

Cet élément, dont la présence est obligatoire dans chaque page HTML, n'est à utiliser qu'une seule fois par page et uniquement comme enfant des balises HTML body, html, div et form.

Note : si une page HTML contient un iframe, celui-ci peut également contenir une balise main (ou un attribut role="main") car c'est une page autonome.

Pour plus détails, voir Mainlining Mains.

form

La balise form (ou l'attribut de région ARIA role="form") est à utiliser pour identifier un formulaire. Ses enfants seront des balises d'éléments de formulaires comme les balises input, select, textarea ou button.

Il peut y avoir plusieurs balises form (ou attributs role="form") dans une même page. Dans ce cas, y ajouter un nom accessible unique (voir Bonnes pratiques).

section

La balise section (ou l'attribut de région ARIA role="region") permet de regrouper du contenu (exemples : chapitres d'un livre, grandes parties d'une page d'accueil, ...) thématiquement.

Plusieurs balises section (ou attributs role="region") peuvent être présentes dans la page. Un nom accessible unique est requis pour chaque occurrence (voir Bonnes pratiques).

aside

La balise aside (ou l'attribut de région ARIA role="complementary") est à utiliser pour identifier du contenu annexe au contenu principal de la page (information complémentaire, publicité…).

Cet élément est à placer comme enfant direct de la base body.

Il peut y avoir plusieurs balises aside (ou attributs role="complementary") dans une même page. Dans ce cas, y ajouter systématiquement un nom accessible unique (voir Bonnes pratiques).

La balise footer (ou l'attribut de région ARIA role="contentinfo") permet d’identifier le pied de page. Cela est vrai uniquement si cet élément est placé dans une balise body, soit comme enfant direct, soit dans une balise HTML autre que article, aside, main, nav et section.

De manière générale et pour simplifier, il est conseillé d'utiliser la balise footer (ou l'attribut de région ARIA role="contentinfo") une seule fois par page.

Note : si une page HTML contient un iframe, celui-ci peut également contenir une balise main (ou un attribut role="main") car c'est une page autonome.

Bonnes pratiques

Quand plusieurs régions (landmarks) de même type sont présentes dans la page, il peut être pertinent de donner à chacune un nom accessible différent pour permettre aux utilisateurs d'assistance technique de les différencier. Un nom accessible s'ajoute, selon le cas, dans :
- un attribut aria-labelledby qui pointe sur le titre d'entête dont on veut utiliser le contenu comme nom accessible, si la région a un titre d'entête.
- un attribut aria-label, si la région n'a pas de titre d'entête (exemple : texte dans une balise h1 à h6).
Note : un attribut aria-describedby pointant sur un élément dont on veut utiliser le contenu comme complément au nom accessible (description accessible) peut aussi permettre de préciser la fonction d'une région.

Exemple d'une page avec 3 régions de navigation :
```
    <nav aria-label="Menu principal">[…]</nav>
    <nav aria-label="Menu secondaire">[…]</nav>
    <nav aria-label="Fil d’Ariane">[…]</nav>
    
```
Plus de détails sur "Les attributs ARIA qui peuvent vous sauver".
Tout le contenu de la page doit être inclus dans les balises HTML5 ou des régions (landmarks) ARIA de structure. Ceci permet aux utilisateurs d'avoir accès à tout le contenu, même celui qu'ils n'auraient pas trouvé car en dehors de ces balises.
Exception : Les boites de dialogue modales n'ont pas besoin d'être imbriquées dans une balise de région.

Régions ARIA (landmarks), utilisateurs et aides techniques

Les balises HTML5 qui définissent les grandes régions de la page ont un support suffisant avec les aides techniques (lecteurs d’écran, loupes logicielles…). On doit donc les utiliser pour structurer sa page sans leur adjoindre le rôle de région ARIA (landmark) correspondant.

Mettre en place ces régions ARIA (landmarks) est une bonne pratique, car elle peut améliorer la navigation de certains utilisateurs sans impacter celle des autres, c’est un plus indéniable !