Test 12.6.1

Dans chaque page web où elles sont présentes, la zone d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche respectent-elles au moins une de ces conditions ?

La zone possède un rôle WAI-ARIA de type landmark correspondant à sa nature ;

La zone possède un titre dont le contenu permet de comprendre la nature du contenu de la zone ;

La zone peut être masquée par le biais d’un bouton précédent directement la zone dans l’ordre du code source ;

La zone peut être évitée par le biais d’un lien d’évitement précédent directement la zone dans l’ordre du code source ;

La zone peut être atteinte par le biais d’un lien d’accès rapide visible ou, à défaut, visible à la prise de focus.

Méthodologie 12.6.1

  1. Retrouver dans le document les zones de regroupement de contenus (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) ;
  2. Pour chaque zone, vérifier que la zone :
    • Soit possède un rôle WAI-ARIA de type landmark correspondant à sa nature ;
    • Soit possède un titre de hiérarchie dont le contenu permet de comprendre la nature du contenu de la zone ;
    • Soit peut être masquée au moyen d’un bouton précédant directement la zone dans l’ordre du code source ;
    • Soit peut être évitée au moyen d’un lien d’évitement précédant directement la zone dans l’ordre du code source ;
    • Soit peut être atteinte au moyen d’un lien d’accès rapide soit visible par défaut, soit visible à la prise de focus lors d’une tabulation.
  3. Si c’est le cas pour chaque zone de regroupement de contenus, 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

Définitions

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.

Liens d’évitement ou d’accès rapide

Liens dont la fonction est de permettre de naviguer à l’intérieur de la page (lien d’évitement, lien d’accès au formulaire de recherche ou au menu…). Ces liens peuvent soit permettre d’accéder à une zone de la page (lien d’accès rapide) ou de sauter une zone dans la page (lien d’évitement).

Note 1 : Un lien d’évitement ou d’accès rapide fonctionnel est un lien dont l’activation permet de reprendre la lecture et la navigation clavier à partir de la cible du lien lors de l’utilisation des navigateurs et des aides techniques retenus dans l’environnement de test (ou « base de référence ») de l’audit.

Note 2 : les liens d’évitements ou d’accès rapide doivent être situés à la même place dans la présentation et dans le même ordre relatif dans le code source afin de satisfaire au critère 12.2.

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