F77Valores de id repetidos en la misma página

Por qué es importante

El atributo id es como el DNI de un elemento: debe ser único en la página. Muchas relaciones dependen de él. Por ejemplo, el atributo for une una etiqueta con su campo usando el id del campo.

Si dos elementos comparten id, el navegador suele quedarse con el primero. El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) puede leer la etiqueta de otro campo, o ninguna. En una tabla, una celda puede quedar unida al encabezado equivocado.

El W3C retiró este fallo porque los navegadores ya corrigen solos casi todos los errores de código. Los id repetidos que rompen relaciones se evalúan hoy con los criterios 1.3.1 (Información y relaciones) y 4.1.2 (Nombre, función y valor).

Cómo evitarlo

1. Dé a cada id un valor único en toda la página.
2. Cuide sobre todo los id que se usan en for, headers, aria-labelledby, aria-describedby y aria-controls.
3. Si repite un bloque en la página, genere id distintos en cada copia. Por ejemplo, con un sufijo: email-1, email-2.
4. Revise los formularios y módulos de WordPress y de los maquetadores visuales. Algunos repiten el mismo id si se colocan dos veces en una página.

Cómo comprobarlo

1. Pase la página por el validador del W3C (validator.w3.org) y busque los avisos de id duplicado.
2. Use axe DevTools. Avisa de los id repetidos que usan las etiquetas y los atributos ARIA.
3. Para cada id repetido, compruebe si alguna etiqueta, tabla o atributo ARIA lo usa.
4. Si lo usa, recorra ese campo o esa tabla con un lector de pantalla. Compruebe que se anuncia la etiqueta o el encabezado correcto.

Ejemplo

Dos formularios en la misma página con el mismo id: la segunda etiqueta se une al primer campo. La solución es dar un id distinto a cada campo.

<!-- Error: dos campos con id="email" -->
<label for="email">Correo para el boletín</label>
<input type="email" id="email">
<label for="email">Correo de contacto</label>
<input type="email" id="email">

<!-- Correcto: cada campo tiene su propio id -->
<label for="email-boletin">Correo para el boletín</label>
<input type="email" id="email-boletin">
<label for="email-contacto">Correo de contacto</label>
<input type="email" id="email-contacto">