tag body

Liens d'évitement

cf. (module liens d'évitement)[]

<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]

[liens d’évitements -> cf module]

<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>

@todo :

  • détailler le cas du header, footer, l’utilisation d’aside -

Ressources :

  • Notice AcceDe Web
  • 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>, ancre vers les liens d'évitement

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