Régions (landmarks) ARIA

Composant

Date de parution 15 janvier 2018

Préambule

Dans cet exemple, nous allons voir comment améliorer la navigation dans la page en ajoutant de la sémantique au contenu permettant de repérer plus facilement les grandes régions de la page.

Théorie

HTML5 introduit de nouvelles balises, notamment des balises sémantiques (main, aside, footer et header, ...).

Ces balises doivent ê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.

Pour une page en HTML5 :


<head>
  …
  <title>Titre de la page</title>
  …
</head>
<body>
  <header>
    <h1>…</h1>
    <nav>…navigation…</nav>
    <p>en tête de page : logo, baseline…</p>
    …
  </header>
  <main>
     <nav aria-label="Fil d’Ariane">[…]</nav>
     <section>
       <header>
         <h1>Actualités</h1>
         <p> 21 juin 2018 - Fête de la musique</p>
       </header>
       <p>contenu de la section</p>
       <footer>
         <p>contenu du pied de section : copyright…</p>
         …
       </footer>
    </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 les landmarks ARIA :


<head>
  …
<title>Titre de la page</title>
  …
</head>
<body>
  <div role="banner">
    <h1>…</h1>
    <div role="navigation">…navigation…</div>
    <p>en tête de page : logo, baseline…</p>
    …
  </div>
<div role="main">
<div role="navigation" aria-label="Fil d’Ariane">[…]</nav>
  <div role="region">
    <div role="header">
      <h1>Actualités</h1>
      <p> 21 juin 2018 - Fête de la musique</p>
    </header>
    <p>contenu de la région</p>
    <div role="contentinfo">
      <p>contenu du pied de région : copyright…</p>
    </div>
  </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>

Usages

Il ne peut y avoir qu’une seule balise main ou donc un seul role=main par page afin d’identifier le contenu principal d’une page.
La balise section ou role=region permet de thématiquement regrouper du contenu, par exemple, des chapitres d'un livre, les grandes parties d'une page d'accueil...
La balise article ou role=article est une portion autonome de la page, en général, réutilisable, par exemple, un article de blog, d'un journal, un commentaire d'un blog...
Le role=navigation ou la balise nav permet d’identifier les principales navigations internes au site. Les bonnes pratiques demandent que l’on utilise 3 balises ou rôles navou navigation maximum par page.
La balise footer ou le role=contentinfo permettent d’identifier le pied de page. Il doit être unique dans la page, sauf lorsqu'il est présent dans des balises section, role=region ou article, role=article.
La balise header ou role=header identifie l’en-tête de la page. Lui aussi doit être unique, sauf lorsqu'il est présent dans des balises section, role=region ou article, role=article.
Pour identifier le formulaire de recherche dans le site, on utilisera seul le role=search ARIA.
Si besoin, le contenu annexe au contenu principal de la page (information complémentaire, publicité…) doit être identifié en utilisant la balise aside ou le role=complementary.

Bonnes pratiques

Toutes ces landmarks/régions peuvent s'appuyer sur les attributs ARIA que sont aria-label, aria-labelledby` et aria-describedby afin de leur fournir un nom accessible plus spécifique.

Notamment quand plusieurs landmarks de même types sont présents dans la page, il peut être pertinent de leur donner une description via ces attributs ARIA.

Exemple d'une page à trois 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".

Autre bonne pratique, il faut que tout le contenu soit inclus dans les Landmarks/balises HTML5 de structure. Ceci permet aux utilisateurs de ne pas oublier du contenu qu'ils n'auraient pas trouvé.

Landmarks, utilisateurs et aides techniques

Les balises HTML5 définissant 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 des rôles Landmarks.

Mettre en place ces landmarks ARIA 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 !