Utiliser aria-label pour donner une voix à vos élements web

Qu'est-ce que aria-label ?

L'attribut aria-label permet aux développeurs de fournir une étiquette textuelle alternative pour un élément lorsque le texte visible n'est pas suffisant ou n'existe pas. C'est un outil puissant pour améliorer l'accessibilité des sites web, en particulier pour les utilisateurs de technologies d'assistance.

Spécification W3C

Selon la spécification W3C (World Wide Web Consortium), aria-label est défini comme suit :

• Il fournit une étiquette accessible pour les objets qui peuvent être lus par les technologies d'assistance.
• Il est utilisé pour définir une chaîne qui étiquette l'élément courant.
• Lorsqu'il est présent, il doit être utilisé à la place du contenu de l'élément pour créer l'étiquette accessible.

Exemples d'utilisation

Bouton sans texte visible

<button aria-label="Fermer" onclick="closeDialog()">X</button>

Icône dans un lien

<a href="https://twitter.com/profile" aria-label="Suivez-nous sur Twitter"><i class="fa fa-twitter"></i></a>

Champ de recherche

<input type="search" aria-label="Rechercher sur le site">

Navigation avec plusieurs menus

<nav aria-label="Menu principal">
    <!-- contenu du menu -->
</nav>
<nav aria-label="Menu secondaire">
    <!-- contenu du menu -->
</nav>

Bonnes pratiques d'utilisation

• Utilisez aria-label pour les éléments sans texte visible
• Assurez-vous que le label est concis et descriptif
• Testez avec différentes technologies d'assistance

Limites et précautions

Limitations techniques

• Non traduit : Le contenu de aria-label n'est pas automatiquement traduit par les outils de traduction de navigateur.
• Non visible : Le texte n'est pas visible pour les utilisateurs qui n'utilisent pas de technologies d'assistance.
• Surcharge potentielle : Une utilisation excessive peut rendre la navigation confuse pour les utilisateurs de lecteurs d'écran.

Éléments où aria-label n'est pas autorisé

Il est important de noter que l'attribut aria-label n'est pas autorisé pour certains rôles d'éléments. Ces rôles incluent : caption, code, definition, deletion, emphasis, generic, insertion, mark, none, paragraph, strong, subscript, suggestion, superscript, term, et time. L'utilisation de l'attribut aria-label sur ces éléments peut conduire à des problèmes d'accessibilité et à des comportements inattendus dans les technologies d'assistance.

Cas où ne pas l'utiliser

Éléments avec du texte visible

<p aria-label="Ceci est différent du texte visible">Texte visible sur la page</p>

Éléments de contenu longs

<article aria-label="Cet article parle de l'histoire de l'Internet depui sa création en..."><!-- Contenu de l'article --></article>

Éléments interactifs avec un libellé visible

<button aria-label="Soumettre le formulaire">Envoyer</button>

Champs de formulaire avec des étiquettes visibles (Préférez l'utilisation de <label>)

<input type="text" aria-label="Nom">

Alternatives à aria-label

aria-labelledby

<h2 id="titre">Mon titre</h2>
<div aria-labelledby="titre">Contenu associé au titre</div>

Attribut title

<button title="Cliquez pour soumettre le formulaire">Envoyer</button>

Texte caché visuellement

<button><span class="visually-hidden">Fermer</span>X</button>

Élément label

<label for="nom">Nom :</label><input id="nom" type="text">

Impact sur le SEO

• Accessibilité améliorée : Un site plus accessible peut indirectement améliorer le référencement
• Contexte supplémentaire : Les moteurs de recherche peuvent utiliser le contenu de aria-label pour mieux comprendre le contexte
• Pas de sur-optimisation : Évitez de surcharger les aria-label avec des mots-clés pour le SEO
• Cohérence : Assurez-vous que le contenu de aria-label est cohérent avec le contenu visible de la page