duplicate-id
Los ID deben ser únicos
Comprueba que cada valor no vacío del atributo id sea único dentro de su propio documento o árbol shadow.
Ámbito de aplicación. Se aplica a cualquier elemento que tenga un atributo id no vacío. La visibilidad es irrelevante. Un id duplicado rompe las mismas búsquedas tanto si el elemento se renderiza como si no, por lo que ACT 3ea0c8 también evalúa los elementos ocultos.
Resultado esperado. Ningún otro elemento del mismo árbol tiene el mismo valor de id, comparado exactamente como está escrito (id="a " e id="a" son ids distintos). Los ids tienen ámbito por árbol de documento y por árbol shadow, así que el mismo id dentro de dos shadow roots distintos no es un duplicado.
Qué informa un hallazgo.
reasonCode:DUPLICATE_ID_IN_SHADOW_TREEcuando los elementos están en un mismo shadow tree, que construye un script y que el marcado servido de la página no contiene;DUPLICATE_IDen los demás casos. Ambos fallan del mismo modo.id: el id duplicado.count: cuántos elementos del mismo árbol lo llevan.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<div id="section-1">First</div><div id="section-2">Second</div>
Cada elemento tiene un id distinto.
<div id="section-1">First</div><div id="section-1">Second</div>
El id section-1 se usa en dos elementos del mismo árbol, lo que rompe <label for>, los enlaces de fragmento y getElementById.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
DUPLICATE_ID
- Inspeccionar los elementos que indica el informe y anotar el id compartido.
- Comprobar si algo remite a ese id: el for de un label, un atributo aria-* como aria-labelledby, o un enlace a #the-id.
- Si algo remite a él, seguir la referencia (hacer clic en el label o en el enlace, o leer el nombre en el panel Accesibilidad) y comprobar que llega al elemento previsto.
- Comprobar qué versión de WCAG y qué norma aplica la auditoría; con WCAG 2.2, o con 2.0/2.1 y la fe de erratas de 2023, el 4.1.1 se cumple para HTML.
Se cumple. Nada falla por el duplicado (las referencias llegan al elemento previsto) y la auditoría usa WCAG 2.2, o 2.0/2.1 con la fe de erratas, con las que el 4.1.1 se cumple.
No se cumple. Un label, una referencia ARIA o un enlace llega al elemento equivocado (WCAG 1.3.1 o 4.1.2), o la auditoría sigue una norma que conserva el texto del 4.1.1, como EN 301 549 V3.2.1, en la que los id duplicados incumplen el 4.1.1 (F77).
DUPLICATE_ID_IN_SHADOW_TREE
- Inspeccionar los elementos que indica el informe, dentro de la misma raíz shadow, y anotar el id compartido.
- Comprobar si algo remite a ese id: el for de un label, un atributo aria-* como aria-labelledby, o un enlace a #the-id.
- Si algo remite a él, seguir la referencia (hacer clic en el label o en el enlace, o leer el nombre en el panel Accesibilidad) y comprobar que llega al elemento previsto.
- Comprobar qué versión de WCAG y qué norma aplica la auditoría; con WCAG 2.2, o con 2.0/2.1 y la fe de erratas de 2023, el 4.1.1 se cumple para HTML.
Se cumple. Nada falla por el duplicado (las referencias llegan al elemento previsto) y la auditoría usa WCAG 2.2, o 2.0/2.1 con la fe de erratas, con las que el 4.1.1 se cumple.
No se cumple. Un label o una referencia ARIA del componente llega al elemento equivocado (WCAG 1.3.1 o 4.1.2), o la auditoría sigue una norma que conserva el texto del 4.1.1, como EN 301 549 V3.2.1, en la que los id duplicados incumplen el 4.1.1 (F77).