# Les rôles ARIA de repère (landmarks) dans un thème WordPress classique

> Les rôles ARIA de repère découpent une page en zones que les lecteurs d'écran savent nommer et parcourir. Voici comment les poser correctement dans un thème classique.

- Auteur : Clément Hadrot
- Publié le : 2020-01-14
- Mis à jour le : 2020-01-14
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/roles-aria-landmarks-theme-classique/

## L’essentiel

- 8 rôles normalisés à connaître
- Un seul <main> par page, jamais deux
- header.php et footer.php à corriger en premier

Un utilisateur de lecteur d'écran ne « voit » pas qu'un bloc à droite est une zone de widgets ou qu'un bandeau en haut contient le logo. Sans indication, il n'a que du texte qui défile, section après section, sans relief. Les rôles ARIA de repère servent exactement à ça : nommer les grandes zones d'une page pour qu'un utilisateur de NVDA ou de VoiceOver puisse sauter directement au menu, au contenu principal ou au pied de page, plutôt que de tout écouter dans l'ordre.

Sur un thème classique (fichiers `header.php`, `footer.php`, `sidebar.php`, gabarits PHP), ces rôles ne sont pas ajoutés automatiquement par WordPress : c'est au thème de les poser, à la main ou via les éléments HTML5 qui les portent implicitement. La bonne nouvelle, c'est qu'un thème basé sur `_s` (Underscores) ou sur Twenty Nineteen s'en sort déjà pas mal. La moins bonne, c'est que beaucoup de thèmes premium empilent les `<div>` sans jamais y penser.

## Les huit rôles de repère et à quoi ils servent

La spécification ARIA en définit huit : `banner`, `navigation`, `main`, `complementary`, `contentinfo`, `search`, `form` et `region`. Chacun a un sens précis pour la technologie d'assistance, qui les regroupe dans un menu de navigation rapide (souvent accessible par la touche `D` sous NVDA, ou via le rotor sous VoiceOver).

- `banner` : l'en-tête du site, généralement unique et porté par la balise `<header>` quand elle est un enfant direct de `<body>`.
- `navigation` : un bloc de liens de navigation, porté par `<nav>`. Un thème peut en avoir plusieurs (menu principal, fil d'Ariane, pagination), à condition de les distinguer par `aria-label`.
- `main` : le contenu principal et unique de la page, porté par `<main>`.
- `complementary` : un contenu associé mais séparé, porté par `<aside>`, typiquement la colonne de widgets.
- `contentinfo` : les informations de bas de page, portées par `<footer>` quand il est un enfant direct de `<body>`.
- `search`, `form` et `region` se posent explicitement avec l'attribut `role`, car aucun élément HTML5 ne les porte automatiquement.

## Corriger header.php et footer.php en premier

> L'essentiel à retenir : 8 rôles normalisés à connaître ; Un seul <main> par page, jamais deux ; header.php et footer.php à corriger en premier

Dans la plupart des thèmes classiques, deux fichiers concentrent l'essentiel des repères manquants. Voici un `header.php` minimal mais correct :

```
<header id="masthead" class="site-header">
  <div class="site-branding">
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
  </div>
  <nav id="site-navigation" class="main-navigation" aria-label="Menu principal">
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
  </nav>
</header>
```

Notez l'`aria-label` sur le `<nav>` : dès qu'un thème affiche plus d'un menu (menu principal et menu de pied de page, par exemple), chaque `<nav>` doit porter un libellé distinct, sinon un lecteur d'écran annoncera deux fois « navigation » sans que l'utilisateur sache laquelle choisir.

## Le piège du main dupliqué

Le repère `main` doit apparaître une seule fois par page. Or certains thèmes à page builder injectent un `<main>` dans le gabarit *et* un second dans un template de page personnalisé, ce qui casse la navigation par repères. Un simple `grep -r "<main" wp-content/themes/mon-theme/` permet de vérifier qu'il n'y a qu'une seule occurrence structurelle, en excluant les balises conditionnelles qui ne s'affichent jamais ensemble.

## La colonne de widgets et le rôle complementary

La sidebar générée par `dynamic_sidebar()` gagne à être enveloppée dans un `<aside>` plutôt qu'un `<div class="sidebar">`. Attention cependant : si la colonne contient en réalité une deuxième navigation ou un contenu tout aussi important que l'article, `complementary` n'est pas le bon rôle — il désigne un contenu secondaire, pas un contenu parallèle.

## Vérifier le résultat

Une fois les repères en place, l'inspecteur d'accessibilité de Firefox (onglet « Accessibilité » des outils de développement) affiche l'arbre complet des rôles calculés, repère par repère. C'est le moyen le plus rapide de repérer un `main` en trop ou un `nav` sans libellé, sans avoir à lancer un lecteur d'écran à chaque modification.

> Sur un thème client, je commence toujours par ouvrir cet arbre avant de toucher au moindre CSS : la moitié des corrections d'accessibilité d'un thème classique se jouent dans `header.php` et `footer.php`, pas dans les gabarits d'articles.

## En résumé

Les rôles de repère ne demandent ni plugin ni bibliothèque : juste les bons éléments HTML5 aux bons endroits, et des libellés quand plusieurs repères du même type coexistent. Sur un thème classique, ce travail se fait une fois, dans les fichiers d'ossature, et bénéficie ensuite à tous les gabarits qui en héritent.
