El atributo id del HTML tiene que ser \u00fanico a cada p\u00e1gina: cada elemento puede tener un solo ID y ning\u00fan elemento puede compartir el mismo ID con otro. Cuando dos o m\u00e1s elementos comparten el mismo ID, el c\u00f3digo HTML es inv\u00e1lido y el comportamiento del navegador acontece impredecible.<\/p>\n
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\u00edtico.<\/p>\n
Els IDs duplicats afecten l’accessibilitat de diverses maneres:<\/p>\n
aria-labelledby<\/code>, aria-describedby<\/code> y aria-controls<\/code> usan IDs para referenciar elementos. Si el ID es duplicado, el lector de pantalla apunta al primer elemento que encuentra, que puede ser incorrecto.<\/li>\n- Skip links:<\/strong> si el anclaje del skip link (#contenido-principal) aparece dos veces, el navegador puede llevar el usuario al primer elemento, que podr\u00eda no ser el correcto.<\/li>\n<\/ul>\n
\u00bfPor qu\u00e9 aparecen IDs duplicados?<\/h2>\n
En un HTML escrito a mano, los IDs duplicados son infrecuentes. El problema aparece habitualmente con constructores de p\u00e1ginas como Divi, Elementor o Beaver Builder, que generan IDs autom\u00e1ticamente para sus m\u00f3dulos. Si un m\u00f3dulo se copia y pega, el ID se duplica. Si un shortcode se renderiza dos veces, los IDs de su HTML se duplican.<\/p>\n
En WordPress, los plugins de formularios, sliders y galer\u00edas su fuentes habituales de IDs duplicados, especialmente si se incluyen m\u00faltiples veces en la misma p\u00e1gina.<\/p>\n
C\u00f3mo detectar IDs duplicados<\/h2>\n
La detecci\u00f3n manual de IDs duplicados es pr\u00e1cticamente imposible en webs grandes. Las herramientas autom\u00e1ticas sue\u00f1o imprescindibles.<\/p>\n
La herramienta de autoevaluaci\u00f3n de webaccessible.cat detecta autom\u00e1ticamente todos los IDs duplicados de la p\u00e1gina, indicando qu\u00e9 elementos est\u00e1n afectados y cu\u00e1ntas veces aparece cada ID duplicado.<\/p>\n
Tambi\u00e9n puedes usar la consola del navegador:<\/p>\n
\/\/ Executar a la consola del navegador
\nconst ids = [...document.querySelectorAll('[id]')].map(el => el.id);
\nconst duplicats = ids.filter((id, i) => ids.indexOf(id) !== i);
\nconsole.log('IDs duplicats:', [...new Set(duplicats)]);<\/code><\/p>\nC\u00f3mo corregir IDs duplicados<\/h2>\n
La correcci\u00f3n depende de la causa:<\/p>\n
\n- Si el problema es un m\u00f3dulo de Divi copiado, hay que cambiar el ID del duplicado manualmente desde el constructor de p\u00e1ginas.<\/li>\n
- Si el problema es un plugin que genera IDs fijas, hay que contactar con el desarrollador del plugin o buscar una alternativa accesible.<\/li>\n
- Si el problema es c\u00f3digo HTML personalizado, hay que revisar y hacer \u00fanicos todos los IDs afectados. Una buena pr\u00e1ctica es usar IDs sem\u00e1nticos y \u00fanicos, o mejor usar clases en lugar de IDs para los estilos CSS, reservando los IDs para los anclajes y las referencias ARIA.<\/li>\n<\/ul>\n
IDs duplicados vs IDs en m\u00faltiples p\u00e1ginas<\/h2>\n
Importante: los IDs tienen que ser \u00fanicos dentro de una misma p\u00e1gina, pero el mismo ID puede aparecer en p\u00e1ginas diferentes. Si todas las p\u00e1ginas de la web tiene un <main id=\"contingut-principal\"><\/code>, esto es correcto. El problema es cuando dentro de una misma p\u00e1gina cargada aparecen dos elementos con el mismo ID.<\/p>\nYour content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div>