Landmarks

WAI-ARIA propose des rôles permettant d’indiquer les zones principales (régions) du document. Ces rôles sont très profitables aux utilisateurs de lecteurs d’écran notamment, mais également aux utilisateurs de la navigation au clavier qui peuvent ainsi bénéficier de fonctionnalités de navigation rapide dans la structure du document.

Les rôles doivent être définis dans le document en fonction de la nature de la zone :

  • La zone d’en-tête doit avoir un attribut WAI-ARIA role="banner" ;
  • Le menu de navigation principal doit avoir un attribut WAI-ARIA role="navigation" ;
  • La zone de contenu principal doit avoir un attribut WAI-ARIA role="main" ;
  • La zone de pied de page doit avoir un attribut WAI-ARIA role="contentinfo" ;
  • La zone de moteur de recherche sur le site doit avoir un attribut WAI-ARIA role="search".

Note 1 : Si la plupart des lecteurs d’écran mettent à disposition ces fonctionnalités, les navigateurs n’ont pas encore proposé de fonctionnalité de navigation dédiée pour les utilisateurs qui ne peuvent pas utiliser la souris. La mise en place des liens d’évitement reste donc à privilégier par rapport aux landmarks.

Note 2 : Les rôles WAI-ARIA banner, main et contentinfo doivent être uniques dans la page. Le rôle WAI-ARIA navigation est réservé aux zones de navigations principales et secondaires. Lorsqu’il y a plusieurs rôles WAI-ARIA navigation, il peut être utile de les différencier en précisant un nom à chacune des zones via l’attribut WAI-ARIA aria-label ou aria-labelledby.

Tests qui lient vers ce terme :

Définitions citées

Liste de liens permettant une navigation spécifique dans le site, dans une rubrique ou dans une collection de pages.

Les principales barres de navigation (critère 12.2) sont :

  • Un menu de navigation ;
  • Un fil d’ariane ;
  • Une liste de navigation d’une liste de résultats ;
  • Des liens d’évitement.

Il existe différents types de menu de navigation (critère 12.1 et critère 12.2) :

  • Menu de navigation principal ;
  • Menu de sous-rubrique ;
  • Menu contextuel ;
  • Table des matières concernant un ensemble de pages.

Note : Les liens de pied de page renvoyant vers les mentions légales, plan du site et autres informations concernant le site ne sont pas considérés comme un menu de navigation principal.

Moteur de recherche (interne à un site web)

Zone donnant accès directement (formulaire) ou indirectement (élément d’interface donnant accès au formulaire) au moteur de recherche qui permet d’effectuer des recherches sur les contenus de l’ensemble du site.

Note : Attention à ne pas confondre cette zone de recherche, unique dans le site, avec tout autre moteur de recherche permettant par exemple de faire des recherches sur une partie restreinte du site : un catalogue, les offres sur une section marchés publics…

Voir la définition technique de zone d’en-tête fournie par WAI-ARIA search(role).

Structure du document

Ensemble d’éléments permettant de définir les grandes zones d’une page HTML telles que la zone d’en-tête de la page, les zones de navigation principale et secondaire, la zone de contenu principal et la zone de pied de page.

Zone d’en-tête

Zone située en haut du document et contenant généralement le titre du document, un logo, un slogan…

Note : Attention à ne pas confondre cette zone d’en-tête, unique dans le site, avec tout contenu pouvant être balisé en HTML5 avec l’élément <header>.

Voir la définition technique fournie par WAI-ARIA : Banner (role).

Zone de contenu principal

Zone contenant les principaux contenus de la page, là où se trouvent les informations et fonctionnalités de fond (donc en dehors des menus, de la recherche ou des zones secondaires de publicités, actualités connexes…).

Note : Cette zone est unique dans la page. Elle peut être difficile à déterminer sur certaines pages particulières, comme la page d’accueil.

Voir la définition technique fournie par WAI-ARIA : Main (role).

Zone de pied de page

Il s’agit des informations concernant le fonctionnement du site ou les informations légales. On y trouve par exemple les mentions légales, les crédits, les conditions d’utilisation, le plan du site et éventuellement la page accessibilité.

Note : Attention à ne pas confondre cette zone de pied de page, unique dans le site, avec tout contenu pouvant être balisé en HTML5 avec l’élément <footer>.

Voir la définition technique fournie par WAI-ARIA : Contentinfo (role).