presentation-role-conflict
Un rôle de présentation ne doit pas entrer en conflit avec un attribut ARIA global ou la focalisabilité
Vérifie que role="presentation"/"none" (y compris le rôle de présentation implicite d’un <img alt="">) n’est pas combiné à un attribut ARIA global (aria-label, aria-hidden, aria-describedby, ...) ou à la focalisabilité (tabindex/native).
Applicabilité. S’applique aux éléments dont l’attribut role se résout en presentation ou none (le premier jeton désignant un rôle connu, sans tenir compte de la casse, donc role="foo none" et role="NONE" comptent), OU à un <img alt=""> sans rôle explicite propre (un alt vide donne à un <img> un rôle de présentation implicite selon HTML-AAM, même sans aucun attribut role explicite : img[alt=''], [role~="none" i], [role~="presentation" i]).
Attendu. L’élément ne porte pas aussi un état ou une propriété global WAI-ARIA (aria-label, aria-hidden, aria-describedby, aria-live, aria-current, ... ; l’ensemble complet des attributs globaux, pas seulement ceux qui servent à nommer), ET il n’est pas focalisable. D’après la section Presentational Roles Conflict Resolution de la spécification WAI-ARIA, un rôle de présentation est « rétabli » au rôle sémantique implicite de l’élément lorsque l’une ou l’autre condition est remplie : le rôle presentation/none cesse alors silencieusement de fonctionner, contrairement à l’intention manifeste de l’auteur de masquer l’élément de l’arbre d’accessibilité.
Ce que rapporte un constat.
role: le rôle de présentation en vigueur :presentationounone. Un <img alt=""> sans rôle propre indiquepresentation.conflictingAttrs: les attributs ARIA globaux que porte l’élément, quelle que soit leur valeur. Un élément est un nom d’attribut, commearia-label. Vide lorsque l’élément aaria-hidden="true"ou que seule sa focalisabilité entre en conflit.focusable:truelorsque l’élément peut recevoir le focus, ce qui rétablit aussi son rôle.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<div role="presentation">Decorative</div>
Aucun attribut de nommage conflictuel n’accompagne le rôle de présentation.
<div role="presentation" aria-label="Conflicting">Content</div>
role="presentation" demande aux technologies d’assistance d’ignorer cet élément, mais aria-label lui fournit un nom ; selon la résolution des conflits WAI-ARIA, l’attribut global l’emporte et le rôle de présentation est abandonné, si bien que l’élément (et son nom) réapparaissent dans l’arbre de façon inattendue.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
PRESENTATION_ROLE_CONFLICT
- Repérez l’élément indiqué par le rapport ; il a role="presentation" ou "none", ou c’est un img avec alt="".
- Notez les attributs aria-* contradictoires que liste le rapport, et s’il indique que l’élément peut recevoir le focus.
- Ouvrez le panneau Accessibilité des outils de développement et voyez quel rôle et quel nom l’élément expose réellement.
- Déterminez l’intention : s’il est décoratif, retirez l’attribut aria-* et la focalisabilité ; s’il porte du sens, retirez le rôle de présentation (ou donnez à l’image un vrai texte alt).
Réussite. L’élément est soit purement décoratif, sans attribut aria-* global ni focus, soit il conserve volontairement son vrai rôle.
Échec. L’élément est censé être masqué mais son attribut aria-* ou sa focalisabilité rétablit son rôle : les technologies d’assistance l’exposent malgré tout (bonne pratique, résolution des conflits des rôles de présentation WAI-ARIA).