IDs duplicados

¿Qué es un ID duplicado?

El atributo id del HTML tiene que ser único a cada página: cada elemento puede tener un solo ID y ningún elemento puede compartir el mismo ID con otro. Cuando dos o más elementos comparten el mismo ID, el código HTML es inválido y el comportamiento del navegador acontece impredecible.

El criterio WCAG 4.1.1 exige que el contenido implementado usando lenguajes de marcado no tenga elementos con atributos id duplicados. Axe-core lo comprueba como error crítico.

¿Por qué causan problemas de accesibilidad?

Els IDs duplicats afecten l’accessibilitat de diverses maneres:

• Labels y formularios: si dos campos de formulario comparten el mismo ID, el label se asocia al primero y el segundo queda sin etiqueta accesible.
• Atributos ARIA: aria-labelledby, aria-describedby y aria-controls usan IDs para referenciar elementos. Si el ID es duplicado, el lector de pantalla apunta al primer elemento que encuentra, que puede ser incorrecto.
• Skip links: si el anclaje del skip link (#contenido-principal) aparece dos veces, el navegador puede llevar el usuario al primer elemento, que podría no ser el correcto.

¿Por qué aparecen IDs duplicados?

En un HTML escrito a mano, los IDs duplicados son infrecuentes. El problema aparece habitualmente con constructores de páginas como Divi, Elementor o Beaver Builder, que generan IDs automáticamente para sus módulos. Si un módulo se copia y pega, el ID se duplica. Si un shortcode se renderiza dos veces, los IDs de su HTML se duplican.

En WordPress, los plugins de formularios, sliders y galerías su fuentes habituales de IDs duplicados, especialmente si se incluyen múltiples veces en la misma página.

Cómo detectar IDs duplicados

La detección manual de IDs duplicados es prácticamente imposible en webs grandes. Las herramientas automáticas sueño imprescindibles.

La herramienta de autoevaluación de webaccessible.cat detecta automáticamente todos los IDs duplicados de la página, indicando qué elementos están afectados y cuántas veces aparece cada ID duplicado.

También puedes 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)]);

Cómo corregir IDs duplicados

La corrección depende de la causa:

• Si el problema es un módulo de Divi copiado, hay que cambiar el ID del duplicado manualmente desde el constructor de páginas.
• Si el problema es un plugin que genera IDs fijas, hay que contactar con el desarrollador del plugin o buscar una alternativa accesible.
• Si el problema es código HTML personalizado, hay que revisar y hacer únicos todos los IDs afectados. Una buena práctica es usar IDs semánticos y únicos, o mejor usar clases en lugar de IDs para los estilos CSS, reservando los IDs para los anclajes y las referencias ARIA.

IDs duplicados vs IDs en múltiples páginas

Importante: los IDs tienen que ser únicos dentro de una misma página, pero el mismo ID puede aparecer en páginas diferentes. Si todas las páginas de la web tiene un <main id="contingut-principal">, esto es correcto. El problema es cuando dentro de una misma página cargada aparecen dos elementos con el mismo ID.