Balisage

Les id utilisés par ARIA doivent être uniques

Règle: duplicate-id-aria
Gravité: Critique
Niveau WCAG A

Pourquoi c’est important

aria-labelledby se résout sur le premier élément portant cet id. Si deux éléments le partagent, la moitié de vos composants reçoit discrètement le mauvais nom.

Comment corriger

Rendez unique sur la page chaque id référencé depuis ARIA.
Générez les id par instance de composant plutôt que de les coder en dur dans un gabarit répété.
Regardez d’abord les listes et les lignes de formulaire répétées : c’est de là que viennent les doublons.

Dans le balisage

Échoue

<span id="label">Street</span>
<span id="label">City</span>
<input aria-labelledby="label">

Réussit

<span id="street-label">Street</span>
<span id="city-label">City</span>
<input aria-labelledby="street-label">

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur duplicate-id-aria (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.