Test 9.2.1

Dans chaque page web, les zones principales de la page constituant la structure du document vérifient-elles ces conditions ?

L’élément contenant la zone d’en-tête de la page a un rôle calculé de banner.

Les éléments contenant les zones de navigation principales et secondaires ont un rôle calculé de navigation.

L’élément contenant la zone de moteur de recherche a un rôle calculé de search.

L’élément contenant la zone de contenu principal a un rôle calculé de main.

L’élément contenant la zone de pied de page a un rôle calculé de contentinfo.

Méthodologie 9.2.1

  1. Vérifier que la zone d’en-tête est structurée au moyen d’un élément <header> ou qu’elle est pourvue d’un attribut WAI-ARIA role="banner".
  2. Vérifier que les zones de navigation principales et secondaires sont structurées au moyen d’un élément <nav> ou qu’elles sont pourvues d’un attribut WAI-ARIA role="navigation".
  3. Vérifier que la zone de moteur de recherche est structurée au moyen d’un élément <search> ou qu’elle est pourvue d’un attribut WAI-ARIA role="search".
  4. Vérifier que la zone de contenu principal est structurée au moyen d’un élément <main> ou qu’elle est pourvue d’un attribut WAI-ARIA role="main".
  5. Vérifier que la zone de pied de page est structurée au moyen d’un élément <footer> ou qu’elle est pourvue d’un attribut WAI-ARIA role="contentinfo".
  6. Si c’est le cas pour chaque zone de contenu, le test est validé.

Tests suivants et précédents au clavier

Test précédent : Maj + ←

Test suivant : Maj + →

Avec ces raccourcis clavier, atteindre

Éléments et attributs

banner contentinfo main navigation search <footer> <header> <main> <nav> <search> role='banner' role='contentinfo' role='main' role='navigation' role='search'

Définitions

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 de recherche fournie par WAI-ARIA search(role).

Rôle calculé

Le rôle ARIA d’un élément peut être calculé de deux façons :

  • sur la base du rôle implicite de l’élément. Par exemple, l’élément <header> a le rôle implicite de banner, l’élément <nav> a le rôle implicite de navigation, etc.
  • sur la base du rôle explicite donné par la valeur de l’attribut WAI-ARIA role sur la balise ouvrante : <div role="banner">.

Lorsque le référentiel indique qu’un élément « a le rôle calculé de », ce peut-être du fait d’un rôle implicite ou explicite.

Par exemple : « L’élément a un rôle calculé de banner » indique que l’élément peut-être un élément HTML5 <header> ou tout autre élément possédant l’attribut WAI-ARIA role="banner". À l’inverse, s’il est indiqué « L’élément est pourvu d’un attribut WAI-ARIA role="banner" », alors c’est bien l’attribut role uniquement qui est attendu.

Voir la documentation : Implicit WAI-ARIA semantics.

Ci-dessous la liste des rôles implicites WAI-ARIA des éléments HTML5 permettant de structurer le document :

  • <footer> : role="contentinfo"
  • <header> : role="banner"
  • <main> : role="main"
  • <nav> : role="navigation"
  • <search> : role="search"

Note : Pour <footer> et <header>, le rôle ne sera calculé que s’ils ne sont pas inclus dans un élément ayant le rôle calculé de article, complementary, main, navigation ou section.

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