C'est quoi
Le critère RGAA 8.9 interdit l'usage des balises HTML à des fins purement de présentation quand une balise sémantique appropriée existe.
Exemples d'erreurs courants :
- Un
<div>ou<span>aveconclickutilisé comme bouton, sansrole="button"nitabindex. - Des
<table>utilisés pour la mise en page (layouts tabulaires). - Une
<p>stylée visuellement en gros texte à la place d'un titre. - Des
<br>répétés pour créer de l'espacement vertical. - Un
<blockquote>utilisé pour indenter du texte sans que ce soit une citation.
Qui est touché
- Les personnes aveugles ou malvoyantes : les lecteurs d'écran annoncent le rôle de chaque élément. Un
<div>cliquable n'est pas annoncé comme un bouton et ne sera pas trouvé dans la liste des boutons. - Les utilisateurs clavier : un
<div>sanstabindex="0"n'est pas focusable. Un "bouton" inatteignable au clavier exclut toute navigation sans souris. - Les personnes utilisant des commandes vocales : elles activent les boutons et liens par leur nom. Un faux bouton ne répond pas aux commandes.
Impact business
Un faux bouton (div cliquable) est invisible pour la navigation clavier et les lecteurs d'écran. Sur un tunnel d'achat ou un formulaire, un composant interactif inaccessible peut bloquer complètement la progression.
Les layouts en tableaux perturbent la lecture par les lecteurs d'écran qui naviguent cellule par cellule, perdant le contexte du contenu.
Comment le détecter
- Audit Mynto : le scan détecte les éléments interactifs (avec onclick ou role="button") qui ne sont pas des éléments natifs interactifs.
- Manuel : navigue à la tabulation. Tous les éléments interactifs sont-ils atteignables ? Active chacun avec Entrée et Espace : répondent-ils ?
- Inspecteur : cherche les
divetspanavec des gestionnaires d'événements ou des styles imitant des composants natifs.
Comment corriger
<!-- Faux bouton -->
<div class="btn-primary" onclick="submit()">Valider</div>
<!-- Faux titre -->
<p class="big-title">Section importante</p><!-- Vrai bouton -->
<button type="button" class="btn-primary" onclick="submit()">Valider</button>
<!-- Vrai titre -->
<h2>Section importante</h2>La correction consiste à remplacer la balise détournée par la balise native appropriée. Les balises natives apportent gratuitement : le rôle sémantique, la focusabilité clavier, les événements clavier natifs (Entrée, Espace), et l'annonce correcte par les lecteurs d'écran.
Si le style CSS est associé à la balise de présentation, il suffit de déplacer les classes sur la balise sémantique. Le visuel ne change pas.
Dans WordPress, les constructeurs de page (Bricks, Elementor) génèrent parfois des faux boutons. Préfère les blocs natifs ou configure le constructeur pour utiliser des balises sémantiques.
Questions fréquentes
Peut-on rendre accessible un div cliquable avec ARIA ?
Oui, avec role="button", tabindex="0" et les gestionnaires d'événements clavier (Entrée, Espace). Mais c'est plus complexe qu'utiliser un vrai <button>. La première règle ARIA dit : utilise la balise HTML native si elle existe.
Les tableaux de données sont-ils concernés par le critère 8.9 ?
Non. Un <table> pour présenter des données tabulaires est un usage correct. C'est le <table> de mise en page (layout) qui viole 8.9. Un tableau de données doit par ailleurs avoir des <th> avec scope.
Ce critère s'applique-t-il aux composants JavaScript personnalisés ?
Oui. Un composant JS personnalisé (slider, modal, dropdown) doit utiliser soit les éléments HTML natifs, soit ARIA pour exposer son rôle et son état. C'est aussi l'objet du critère RGAA 7.1 (scripts).
À lire aussi
Cette erreur est-elle sur ton site ?
Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.