Rôle de présentation sur un élément interactif

Silktide recherche des éléments interactifs, tels que des boutons, des liens et des champs de formulaire, qui ont été marqués comme purement décoratifs. Marquer un élément interactif de cette manière en retire la signification pour les technologies d’assistance tout en le laissant cliquable à l’écran.

<!-- Problème : le bouton fonctionne toujours, mais est annoncé comme rien -->
<button role="presentation">Supprimer</button>

<!-- Correction : supprimez le rôle -->
<button>Supprimer</button>

Pourquoi c’est important

Les rôles presentation et none indiquent aux qu’un élément n’a aucune signification — ils servent à retirer la sémantique d’éléments comme les tableaux de mise en page. Appliqués à un élément interactif, ils créent la pire des barrières : un contrôle sur lequel les utilisateurs voyants à la souris cliquent tous les jours, mais qu’un présente comme un contenu inerte ou ignore complètement. L’utilisateur n’a aucun moyen de savoir qu’un bouton est même présent.

Comment le corriger

Supprimez le role=\"presentation\" ou le role=\"none\" de l’élément interactif. Les éléments natifs exposent déjà la signification correcte sans aucun rôle.
Si l’élément ne doit vraiment pas être interactif, faites en sorte qu’il ne le soit pas : remplacez-le par un élément non interactif comme <div>, et supprimez tout tabindex.
Si vous cherchiez à supprimer la sémantique d’un conteneur (par exemple, une table de mise en page autour de contrôles), appliquez le rôle au conteneur, pas aux contrôles qu’il contient.

Comment Silktide teste cela

Trouver chaque élément sur la page avec role=\"presentation\" ou role=\"none\".
Déterminer si l’élément est interactif : un bouton, un lien ou une zone de carte d’image avec un href, un champ de formulaire, ou tout élément placé dans l’ordre de tabulation avec un tabindex de 0 ou plus.
Signaler chaque élément interactif portant un rôle de présentation.

Les éléments retirés de l’ordre de tabulation avec un tabindex négatif ne sont pas signalés, pas plus que les éléments décoratifs tels que les images ou les graphiques SVG.

Dépannage

Un framework ou une bibliothèque a ajouté le rôle

Certaines bibliothèques d’interface appliquent role=\"presentation\" à des conteneurs internes, et parfois au mauvais élément. Inspectez l’élément signalé : s’il est réellement opérable à la souris mais rendu muet pour les technologies d’assistance, la correction doit être apportée dans votre utilisation de la bibliothèque ou en amont.

Ce contrôle ne signale rien alors que je m’attendais à des problèmes

Les tests ARIA peuvent être désactivés par site web. Vérifiez les paramètres avancés du site.