Est-ce que les attributs ARIA peuvent rendre un site accessible ? – GAAD 2024

Dans le cadre de la journée mondiale de sensibilisation à l’accessibilité de 2024 (Global Accessibility Awareness Day), des membres de l’équipe d’Ideance ont répondu à une question sur l’accessibilité numérique et le métier de consultant et consultante en accessibilité. Retrouvez l’ensemble des podcasts sur le billet de blog dédié.

Découvrez la question/réponse de Corinne au format audio, suivie de sa transcription textuelle.

Podcast

Transcription textuelle

Bonjour, mon nom est Corinne Durrmeyer et je suis consultante en accessibilité numérique chez Ideance.

Je m’intéresse au sujet de l’accessibilité numérique depuis plus de 10 ans maintenant et la question à laquelle je vais tenter d’apporter une réponse est la suivante : « Est-ce que les attributs ARIA peuvent rendre un site accessible ? »

Avant toute chose, il est nécessaire de bien comprendre ce que sont les attributs ARIA.

Ils sont apparus dans la spécification technique WAI-ARIA du W3C, pour améliorer l’accessibilité des pages web.

Ces attributs dotent HTML d’une couche sémantique additionnelle, en permettant aux développeurs d’ajouter des rôles, des propriétés et des états supplémentaires aux composants.

  • Les rôles servent à définir la nature de l’élément ou sa fonction. role="progressbar" ou role="search" permettent, par exemple, d’identifier l’élément comme une barre de progression ou une fonctionnalité de recherche.
  • Les propriétés permettent, quant à elle, de définir les propriétés d’un élément.  aria-required="true" ou aria-live="assertive" servent, par exemple, à identifier un champ de formulaire obligatoire ou une zone destinée à accueillir les messages devant être restitués à l’utilisateur sans délai.
  • Les états servent, sans surprise, à indiquer l’état d’un élément. Contrairement aux propriétés qui sont figées, les états peuvent être mis à jour en JavaScript. C’est par exemple le cas de aria-hidden="true" ou aria-selected="true" qui signifient qu’un élément est masqué ou sélectionné.

Les attributs ARIA s’avèrent donc particulièrement utiles pour :

  • améliorer la compréhension globale de la page,
  • simplifier l’utilisation de certains composants complexes,
  • et fournir aux utilisateurs un retour sur les actions qu’ils ont réalisés ou l’état de de la page.

Ils permettent donc bel et bien d’améliorer l’accessibilité d’une page.
Mais, pour que cela soit effectivement le cas, il y a trois bonnes pratiques à respecter :

Ne jamais utiliser ARIA lorsque l’on peut s’en passer

Tout d’abord, il ne faut jamais utiliser ARIA lorsque l’on peut s’en passer. La règle d’or est de toujours préférer les éléments HTML natifs à l’utilisation d’attributs ARIA pour mimer des composants existants.
En effet, il faut savoir que les éléments HTML sont dotés d’une UX particulière. Par exemple, un bouton est activable avec la touche Entrée aussi bien qu’avec la touche Espace, contrairement à un lien qui, lui, n’est activable qu’avec la touche Entrée.

Par conséquent, un lien doté d’un attribut role="button" sera annoncé comme un bouton, mais ne sera activable qu’avec la touche Entrée, sauf si le développeur a implémenté le support de la touche Espace.

Employer ARIA à bon escient

Les attributs ARIA écrasent la sémantique native des éléments auxquels ils sont appliqués. L’application d’un attribut avec une valeur erronée aura donc pour effet de modifier sa sémantique et sa restitution par les technologies d’assistance.

En 2024, WebAIM, un institut pour la recherche, la politique et la pratique en matière de handicap a publié une étude portant sur un million de pages d’accueil. Il en ressort que les pages utilisant ARIA (à l’exception des landmarks, les rôles servant à identifier les zones principales d’une page) avait en moyenne 34.2% d’erreurs en plus que celles sans attributs.

Il est donc préférable de se passer d’ARIA plutôt que de mal l’utiliser…

Ne pas oublier de dynamiser les attributs ARIA qui doivent l’être

Le dernier point à garder en tête est qu’il est nécessaire d’implémenter la mise à jour des certains attributs. Par exemple, l’attribut aria-expanded d’un bouton permet de relier le bouton à l’élément qu’il contrôle. Cet attribut doit avoir false comme valeur lorsque l’élément est replié, et true lorsque l’élément est développé.
L’ajout d’un attribut statique non mis à jour n’améliorera donc pas l’accessibilité du composant, bien au contraire.

En conclusion, on peut donc dire que « oui, les attributs ARIA peuvent rendre un site accessible », sous réserve qu’ils soient utilisés correctement.

À cet effet, le W3C a mis en ligne le site ARIA APG pour aider les développeurs à intégrer la sémantique de l’accessibilité dans leurs motifs de conception.
Régulièrement mis à jour, il recense à l’heure actuelle, 30 types de motif. Pour chacun d’eux, une fiche explicative détaille les exemples de code, et les interactions clavier attendues.

Voici qui répond à la question « Est-ce que les attributs ARIA peuvent rendre un site accessible ? ».
J’espère que cet article vous aura intéressé et qu’il vous aura permis d’y voir plus clair.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Les champs obligatoires sont indiqués par *.