IDs duplicats

Què és un ID duplicat?

L’atribut id de l’HTML ha de ser únic a cada pàgina: cada element pot tenir un sol ID i cap element pot compartir el mateix ID amb un altre. Quan dos o més elements comparteixen el mateix ID, el codi HTML és invàlid i el comportament del navegador esdevé impredictible.

El criteri WCAG 4.1.1 exigeix que el contingut implementat usant llenguatges de marcat no tingui elements amb atributs id duplicats. Axe-core ho comprova com a error crític.

Per què causen problemes d’accessibilitat?

Els IDs duplicats afecten l’accessibilitat de diverses maneres:

• Labels i formularis: si dos camps de formulari comparteixen el mateix ID, el label s’associa al primer i el segon queda sense etiqueta accessible.
• Atributs ARIA: aria-labelledby, aria-describedby i aria-controls usen IDs per referenciar elements. Si l’ID és duplicat, el lector de pantalla apunta al primer element que troba, que pot ser incorrecte.
• Skip links: si l’ancoratge del skip link (#contingut-principal) apareix dues vegades, el navegador pot portar l’usuari al primer element, que podria no ser el correcte.

Per què apareixen IDs duplicats?

En un HTML escrit a mà, els IDs duplicats son infreqüents. El problema apareix habitualment amb constructors de pàgines com Divi, Elementor o Beaver Builder, que generen IDs automàticament per als seus mòduls. Si un mòdul es copia i enganxa, l’ID es duplica. Si un shortcode es renderitza dues vegades, els IDs del seu HTML es dupliquen.

A WordPress, els plugins de formularis, sliders i galeries son fonts habituals d’IDs duplicats, especialment si s’inclouen múltiples vegades a la mateixa pàgina.

Com detectar IDs duplicats

La detecció manual d’IDs duplicats és pràcticament impossible en webs grans. Les eines automàtiques son imprescindibles.

L’eina d’autoevaluació de webaccessible.cat detecta automàticament tots els IDs duplicats de la pàgina, indicant quins elements estan afectats i quantes vegades apareix cada ID duplicat.

També pots usar la consola del navegador:

// Executar a la consola del navegador
const ids = [...document.querySelectorAll('[id]')].map(el => el.id);
const duplicats = ids.filter((id, i) => ids.indexOf(id) !== i);
console.log('IDs duplicats:', [...new Set(duplicats)]);

Com corregir IDs duplicats

La correcció depèn de la causa:

• Si el problema és un mòdul de Divi copiat, cal canviar l’ID del duplicat manualment des del constructor de pàgines.
• Si el problema és un plugin que genera IDs fixes, cal contactar amb el desenvolupador del plugin o buscar una alternativa accessible.
• Si el problema és codi HTML personalitzat, cal revisar i fer únics tots els IDs afectats. Una bona pràctica és usar IDs semàntics i únics, o millor usar classes en lloc d’IDs per als estils CSS, reservant els IDs per als ancoratges i les referències ARIA.

IDs duplicats vs IDs en múltiples pàgines

Important: els IDs han de ser únics dins d’una mateixa pàgina, però el mateix ID pot aparèixer a pàgines diferents. Si totes les pàgines del web tenen un <main id="contingut-principal">, això és correcte. El problema és quan dins d’una mateixa pàgina carregada apareixen dos elements amb el mateix ID.