Les régions ou landmarks ARIA

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

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 !