tag body

Liens d'évitement

Les liens d’évitement sont ajoutés juste après l'ouverture du body et les messages d'avertissement adaptés aux cas de figure pas de js ou vieux navigateurs.

Ils doivent offrir un accès au contenu principal, au menu, au bloc de recherche générale s'il existe.

Une bonne pratique est de les laisser toujours visibles. Si ça n'est pas possible on prend soin au moins de les faire apparaître à la tabulation clavier (cf. le module skip-link de Scampi).

<div class="skip-link">
  <div class="container" id="top">
    <ul>
      <li><a href="#main">Aller au contenu</a></li>
      <li><a href="#search">Aller à la recherche</a></li>
      <li><a href="#nav-main">Aller à la navigation</a></li>
    </ul>
  </div>
</div>

Structure des principaux éléments de la page

Les principales zones de la page doivent être identifiées à l’aide de l’attribut aria role.

Cet attribut peut prendre plusieurs valeurs pour délimiter des zones, parmi lesquelles :

  • role="banner" pour délimiter une zone de contenu qui identifie le site, comme une bannière avec un logo, un slogan et/ou un champ de recherche.
  • role="search" pour délimiter une zone destinée à la recherche, comme un formulaire de recherche.
  • role=“navigation” pour délimiter les menus ou les éléments de navigation principaux.
  • role="main" pour délimiter la zone de contenu principal de la page.

L’attribut role peut être ajouté sur n’importe quelle balise HTML comme <div>, <form>, <nav>, etc.

<noscript>
  ...
</noscript>

[browsehappy -> cf module browsehappy]

[liens d’évitements -> cf module skip-link]

<header role="banner">
  ...
</header>

<div class="search" role="search" id="search">
  ...
</div>

<nav role="navigation" aria-label="navigation principale">
  ...
</nav>

<main role="main">

  <article>
    <header>
      <h1>...</h1>
    </header>
    ...

    <aside role="complementary">
      contenu complémentaire lié au contenu principal
    </aside>
  </article>

  <aside role="complementary">
    contenu complémentaire lié à la page
  </aside>

</main>

<footer role="contentinfo">
  ...
</footer>

Ressources :

  • Notices AcceDe Web
  • RGAA, critère 12.10 [A] Dans chaque page Web, les groupes de liens importants (menu, barre de navigation...) et la zone de contenu sont-ils identifiés hors cas particuliers ?

Retour haut de page

Optionnel : à la fin de <main>, on peut poser une ancre vers les liens d'évitement

  <div class="back-top">
    <p><a href="#top">Retour haut de page</a></p>
  </div>
</main>