Un bouton natif <button> annonce déjà son rôle à un lecteur d’écran sans effort supplémentaire ; mais un menu déroulant personnalisé construit à partir de simples <div> et de JavaScript reste, par défaut, muet pour ces technologies. Les attributs ARIA (« Accessible Rich Internet Applications ») viennent combler ce manque en décrivant explicitement le rôle, l’état ou la relation d’un élément.
Usage courant
L’attribut role précise la fonction d’un élément (role="navigation", role="alert"), tandis que des attributs comme aria-expanded ou aria-hidden décrivent un état dynamique, par exemple un menu ouvert ou fermé. La règle d’or reste cependant de préférer un élément HTML natif porteur de sémantique quand il existe, et de ne recourir à ARIA qu’en complément, jamais en remplacement systématique.
Dans WordPress
Les thèmes du cœur (Twenty Twenty-Four et suivants) intègrent des attributs ARIA sur leurs menus de navigation et leurs zones de recherche, et l’éditeur de blocs Gutenberg en utilise abondamment dans son interface d’administration pour rester utilisable au clavier et au lecteur d’écran.
Exemple
<button aria-expanded="false" aria-controls="menu-principal">
Menu
</button>
<ul id="menu-principal" hidden>...</ul>
Pièges fréquents
Ajouter des rôles ARIA sur des éléments qui possèdent déjà une sémantique native (role="button" sur un <button>) n’apporte rien et peut même créer des redondances gênantes à l’oral. Un attribut aria-* mal maintenu, qui ne reflète plus l’état réel du composant après une interaction, dessert davantage l’utilisateur qu’une absence totale d’attribut.