Comment utiliser l’attribut aria-hidden="true" de manière accessible ?

Quels sont les impacts utilisateurs ?

La documentation ARIA contient un attribut aria-hidden="true" qui permet de masquer un élément aux technologies d’assistance.

Par « technologie d’assistance », on désigne des outils variés utilisés par les personnes handicapées pour accéder au numérique : plage braille, lecteur d’écran, logiciel de dictée vocale pour en citer quelques-uns.

Bien que l’attribut aria-hidden="true" masque un élément aux personnes utilisant une technologie d’assistance, il n’a aucun effet visuel : l’élément reste affiché.

Cela peut s’avérer utile pour éviter de restituer des images décoratives à des personnes qui ne voient pas ou voient mal leur écran et donc à limiter la surcharge d’informations.

Aujourd’hui, intéressons-nous à l’impact de cet attribut sur les personnes qui voient l’écran, notamment les personnes qui se servent de la commande vocale en raison d’un handicap moteur, mais aussi celles qui se servent d’une loupe vocalisée ou d’un lecteur d’écran en raison d’une déficience visuelle ou d’un handicap cognitif.

Que disent les documentations ARIA à propos de aria-hidden ?

La spécification ARIA du W3C contient un avertissement concernant le fait de masquer des contenus visibles : masquer des éléments de cette manière devrait seulement être utilisé dans le cas où cela améliore l’expérience utilisateur, notamment en supprimant du contenu qui serait répétitif pour les utilisateurs et utilisatrices.

Si un contenu est masqué avec l’attribut aria-hidden="true", un contenu ou une fonctionnalité équivalente devrait être proposée.

La documentation « Notes on using ARIA » quant à elle contient cinq règles, dont la quatrième règle spécifie de ne pas utiliser l’attribut aria-hidden="true" sur les éléments qui prennent le focus.

Qu’est-ce qu’un élément « qui prend le focus » ? Il s’agit d’un élément interactif tel qu’un lien, un bouton ou un champ de formulaire (champ de saisie, case à cocher, bouton radio, liste de sélection, etc.), mais aussi tout élément qui possèderait un attribut tabindex="0".

Sur Firefox, les éléments qui ont une propriété CSS overflow-x: auto; ou overflow-y: auto; peuvent également prendre le focus, y compris lorsqu’il s’agit de la valeur calculée ^[1] ou qu’elle provient de la propriété raccourcie overflow.

Que disent les normes et référentiels sur les contenus cachés ou masqués ?

Les WCAG 2.1, citées par la norme EN 301 549 qui s’applique dans l’Union européenne, contiennent le critère Nom, rôle et valeur. Celui-ci requiert que tout composant interactif soit exposé aux technologies d’assistance. Or, si l’attribut aria-hidden="true" est présent sur un composant, il empêche sa reconnaissance par les technologies d’assistance.

Dans le RGAA ^[2], le critère 7.1 est une transposition directe du critère « Nom, rôle et valeur » des WCAG 2.1.

Le critère 10.8 mentionne les contenus cachés qui comprennent les contenus masqués avec l’attribut aria-hidden="true" et requiert la vérification de la pertinence du masquage (« Le contenu caché a vocation à être ignoré par les technologies d’assistance »).

Concrètement, que faut-il faire ?

Avant de masquer un contenu visible avec aria-hidden="true", demandez-vous par exemple si des personnes qui voient l’interface, mais qui la contrôlent à la voix pourrait avoir besoin de lire ce contenu. Si la réponse est « oui », alors ne masquez pas le contenu avec aria-hidden="true".

L’état de l’attribut aria-hidden="true" s’hérite, c’est-à-dire qu’il va s’appliquer à tous les éléments dont le parent possède cet attribut.

Si vous ajoutez du contenu à une interface existante, assurez-vous aussi de ne pas le masquer par erreur en faisant la chasse aux attributs aria-hidden="true" indésirables.

Ce type d’erreur peut être débusquée en faisant des tests avec les lecteurs d’écran indiqués dans l’environnement de test du RGAA.

Cas pratiques où l’utilisation de l’attribut aria-hidden="true" pose question

Carrousels

Dans les carrousels simples qui n’affichent qu’une seule diapositive à la fois, vous pouvez masquer les diapositives non affichées à l’écran avec l’attribut aria-hidden="true".

Mais il peut arriver, dans des carrousels plus complexes, que plusieurs diapositives soient affichées en même temps.

Dans ces cas, même si une seule diapositive est considérée comme « active », les utilisateurs et utilisatrices doivent pouvoir interagir avec n’importe quelle diapositive visible. Elles ne doivent donc pas être masquées avec l’attribut aria-hidden="true !

Bonne pratique à retenir

Continuez à masquer les diapositives non affichées à l’écran avec aria-hidden="true", ou en CSS à l’aide de display: none;.

Prêtez une attention particulière aux carrousels dont le nombre de diapositives visibles est modifié en fonction de la résolution de l’écran et, donc, de l’utilisation du zoom par des personnes malvoyantes.

Boutons switch

Ici, l’étiquette du bouton switch (c’est-à-dire à deux états) est « Activer les notifications ». Pourtant, les personnes qui se servent d’un lecteur d’écran tout en ayant une vision partielle de leur écran pourraient tenter la restitution du texte « non ».

Ce texte ne doit donc pas être masqué aux technologies d’assistance.

Bonne pratique à retenir

Cadres (balise iframe)

Bien que la carte soit un complément à l’adresse et aux autres informations affichées, elle ne doit pas être masquée aux technologies d’assistance : en effet, elle doit pouvoir être lue par une synthèse vocale ou utilisée à l’aide de la commande vocale.

Bonne pratique à retenir

Si les cadres contiennent beaucoup de composants atteignables au clavier, il vaut mieux proposer des liens d’évitement (aussi appelés « liens d’accès rapide ») permettant aux personnes qui naviguent au clavier de passer à la zone suivante.

Vous pouvez toutefois continuer à masquer les cadres dits « techniques », c’est-à-dire les cadres non affichés à l’écran, qui sont insérés par des services tels que les CAPTCHA et le suivi des données personnelles. Si personne ne voit ce type de cadre à l’écran, alors le masquer avec aria-hidden="true" ne devrait pas poser problème.

Conclusion

L’attribut aria-hidden="true" permet aux technologies d’assistance de ne pas restituer certains éléments d’interface :

• non seulement aux personnes aveugles et très malvoyantes qui se servent d’un lecteur d’écran ;
• mais aussi – et on a tendance à l’oublier ! – à des personnes qui voient tout ou une partie de l’écran, mais qui utilisent elles aussi une technologie d’assistance pour compenser un handicap visuel, moteur ou cognitif par exemple.

Utiliser l’attribut aria-hidden="true" à bon escient est donc primordial pour vous assurer que votre interface reste bien accessible à toutes ces personnes-là. Ainsi :

• n’utilisez pas aria-hidden="true" sur les éléments qui doivent être lus par les technologies d’assistance dont se servent notamment des personnes, qui verront par ailleurs ces éléments affichés à l’écran et doivent pouvoir les lire ou interagir avec ;
• rappelez-vous que l’état de l’attribut aria-hidden="true" s’hérite des parents : utilisez un lecteur d’écran pour vérifier que tous les éléments visibles sont bien restitués. Autrement, il y a peut-être un aria-hidden="true" hérité quelque part que vous devrez supprimer.