Région de repère — glossaire de l’accessibilité

Les régions de repère sont des zones de niveau page entre lesquelles les utilisateurs de lecteurs d’écran peuvent se déplacer directement, via des raccourcis clavier dédiés. Elles sont l’équivalent pour la page des divisions de chapitres dans un livre : un utilisateur voyant perçoit la structure grâce aux indices visuels (l’en-tête visible en haut, la barre latérale à droite, le pied de page en bas) ; un utilisateur de lecteur d’écran perçoit la structure grâce aux régions de repère.

Les régions de repère standard

Chacune d’elles est à la fois un élément HTML5 et un rôle ARIA. Il convient d’utiliser l’élément HTML5 lorsque c’est possible ; le rôle ARIA existe pour les cas où l’élément natif ne peut pas être utilisé.

Région	Élément HTML5	Rôle ARIA
En-tête de page (logo, navigation principale)	`<header>` (haut de page)	`role="banner"`
Navigation principale	`<nav>`	`role="navigation"`
Contenu principal	`<main>`	`role="main"`
Contenu complémentaire (barre latérale)	`<aside>`	`role="complementary"`
Pied de page (copyright, liens secondaires)	`<footer>` (bas de page)	`role="contentinfo"`
Recherche	`<search>` (HTML5) ou `<form role="search">`	`role="search"`
Région générique nécessitant une identification	—	`role="region"` (avec label)
Formulaire (si différent de la recherche)	`<form>`	`role="form"`

Notez que <header> et <footer> correspondent respectivement à banner et contentinfo uniquement lorsqu’ils sont enfants directs de <body>. Un <header> à l’intérieur d’un <article> n’est qu’un en-tête d’article — il ne devient pas une région de repère banner.

Comment les utilisateurs de lecteurs d’écran les utilisent

Chaque lecteur d’écran majeur dispose d’un mode de navigation dédié aux régions de repère :

JAWS : R parcourt les repères en avant ; Maj+R en arrière ; Inser+F7 ouvre une liste de tous les repères.
NVDA : D parcourt les repères en avant ; Maj+D en arrière ; Inser+F7 ouvre la liste des éléments.
VoiceOver (macOS) : VO+U ouvre le rotor ; faire pivoter vers « Landmarks » ; naviguer avec les touches fléchées.
VoiceOver (iOS) : faire pivoter avec deux doigts vers « Landmarks » sur le rotor ; balayer de haut en bas pour les parcourir.
TalkBack (Android) : balayer vers le haut puis vers la droite pour ouvrir le menu des contrôles de lecture ; sélectionner le mode « Landmarks » ; balayer vers la droite pour les parcourir.

Une page avec de bonnes régions de repère offre à l’utilisateur de lecteur d’écran une table des matières accessible en une seule touche.

Erreurs courantes liées aux régions de repère

Absence de <main>. Sans repère main, les utilisateurs de lecteurs d’écran doivent naviguer à travers l’en-tête à chaque chargement de page. Chaque page doit avoir exactement un <main>.
Plusieurs <nav> sans label. Une page comportant à la fois une navigation principale et une navigation dans la barre latérale, chacune sous forme de <nav>, oblige l’utilisateur de lecteur d’écran à choisir entre deux entrées « navigation » indiscernables. Chaque <nav> doit être labellisé avec aria-label : <nav aria-label="Principale">, <nav aria-label="Sommaire">.
role="banner" sur un élément interne. Un <header> à l’intérieur de <main> ou <article> n’est pas un banner ; c’est un en-tête d’article. Il ne faut pas lui ajouter role="banner".
Repères dupliqués. Deux <main> sur une même page enfreignent la règle « landmark-no-duplicate-main ». axe et Lighthouse détectent tous deux ce problème.
Région sans label. role="region" nécessite aria-label ou aria-labelledby. Sans cela, les lecteurs d’écran l’ignorent.

Comment auditer les régions de repère

Ouvrir la page dans n’importe quel lecteur d’écran moderne, activer le raccourci de liste des repères et vérifier :

Il y a exactement un banner, un main, un contentinfo.
Chaque <nav> a un nom accessible distinct.
La structure des repères correspond à la structure visuelle de la page.

Une liste de repères qui s’affiche « banner, navigation, navigation, main, complementary, contentinfo » sans autres labels signifie que l’utilisateur ne peut pas distinguer les deux navigations. Il faut corriger cela.