À quoi sert l'aria label ?

L'attribut Aria signifie Accessible Rich Internet Application, c'est une spécification W3C pour améliorer l'accessibilité.
Elle aide ainsi les personnes en situation de handicap à comprendre les éléments constituant votre page web et améliore leur expérience utilisateur.
Elle permet de renseigner les utilisateurs sur des éléments qui leur sont inaccessibles, comme :

• les contrôles interactifs : boutons, menus...
• les curseurs
• les fenêtres contextuelles
• l'interactivité du clavier (sans l'utilisation de la souris)
• les formulaires...

De même que l'acceptation et la prise en charge de l'aria label par les dispositifs d’assistances comme les lecteurs d'écran ou encore la reconnaissance vocale fournissent encore une amélioration de l'accessibilité de votre site web pour tous.

L'accessibilité est cependant encore aujourd'hui malheureusement négligé par de nombreux développeurs.
Rendre son site accessible à tous est pourtant essentiel.

Tout comme le référencement naturel SEO, l'accessibilité doit être une priorité lors du développement de tout site internet, et sur le long terme ces exigences vont s'avérer payante sur le long terme.
L’utilisation de l'aria label est, dans la plupart des cas très simple, à intégrer dans la codification du Frontend de votre site internet.
Comme le choix des couleurs pour le contraste d'un site internet, elle constitue une bonne pratique de développement à mettre en œuvre.

Utilisation de Aria Label

Pour vous aider à implémenter et comprendre l'utilité des différents attributs aria, je vais prendre pour exemple un simple bouton d'envoi de mail

Aria-label

<button role="button" aria-label="Utiliser le bouton pour envoyer le mail">Envoyer</button>

L’attribut aria-label permet d’insérer un nom accessible pour les technologies d’assistance.

En d'autres termes, il permet de nommer l'élément.

Le lecteur, au survol de l'élément, va lire le contenu de l'aria label pour indiquer à l'utilisateur "l'action/ la fonction du bouton" : "Utiliser le bouton pour envoyer le mail"

aria-labelledby

Cet attribut, comme aria-lbel, permet de donner un nom accessible à un élément.

<h2 id="title">Mon titre H2<h2> <button aria-label="Utiliser le bouton pour envoyer le mail" aria-labelledby="title">Envoyer</button>

Le lecteur va renvoyer : "Mon titre H2"

aria-describedby

aria-describedby permet de rajouter une description à l'élément complémentaire à son nom

<h2 id="title">Mon titre H2<h2> <button aria-label="Utiliser le bouton pour envoyer le mail" aria-describedby="title">Envoyer</button>

Le lecteur va renvoyer : "Utiliser le bouton pour envoyer le mail mon titre H2"

<h2 id="title">Mon titre H2<h2> <button id="button" aria-label="Utiliser le bouton pour envoyer le mail" aria-describedby="code title">Envoyer</button>

Le lecteur va renvoyer : "Envoyer utiliser le bouton pour envoyer le mail"

Aria-hidden

Aria-hidden est plus spécifique. Plutôt que d'ajouter un nom à l'élément, il permet au contraire de le dissimuler aux yeux des assistants.

Role

<button role="button" aria-label="Utiliser le bouton pour envoyer le mail">Envoyer</button>

Le "role" permet de définir la nature pour qu'elle soit mieux reconnue par les technologies d’assistance comme les lecteurs d’écran mais aussi les bots d’indexation.

Tous ces attributs sont à utiliser qu'avec certains éléments :

• a avec un attribut href,
• audio et video avec un attribut controls,
• input sauf si type="hidden",
• select,
• button
• textarea
• img
• iframe
• les balises de structure d'une page web : header, footer, main, nav, aside et section

Aria label et le référencement naturel SEO

Les aria label fournissent des données supplémentaires aux crawlers (Google, Bing) qui vont ensuite leur permettre de mieux interpréter et comprendre votre page, sa structure, les éléments qui la composent...

Ces données analysées par les moteurs de recherche auront un effet bénéfique sur votre référencement en améliorant votre positionnement.
L'accessibilité améliore l'expérience utilisateur et intrinsèquement votre SEO.

Afin de vous faciliter la vie, vous pouvez utiliser les plugins d’accessibilité comme Lighthouse ou AXE Accessibility.
Ces 2 outils vont analyser votre page et vous relever les erreurs d'accessibilité à corriger.