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 pararia-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,formetregionse posent explicitement avec l’attributrole, car aucun élément HTML5 ne les porte automatiquement.
Corriger header.php et footer.php 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.phpetfooter.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.
