Marcação

Ids usados por ARIA precisam ser únicos

Regra: duplicate-id-aria
Gravidade: Crítico
Nível WCAG A

Por que isso importa

aria-labelledby resolve para o primeiro elemento com aquele id. Se dois elementos compartilham o mesmo, metade dos seus controles recebe silenciosamente o nome errado.

Como corrigir

Torne único na página todo id referenciado por ARIA.
Gere ids por instância de componente, em vez de fixá-los num template que se repete.
Olhe primeiro listas e linhas de formulário repetidas: é de onde vêm as duplicatas.

Na marcação

Falha

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

Passa

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

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre duplicate-id-aria (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.