Fallo Común F77 de WCAG 2.1: Valores duplicados del atributo ID

El uso correcto del atributo id en HTML y otras tecnologías basadas en XML es crucial para garantizar una navegación accesible y coherente para los usuarios, especialmente aquellos que utilizan tecnologías de asistencia. Cuando un documento contiene valores id duplicados, los lectores de pantalla y otros dispositivos pueden interpretar erróneamente la estructura del contenido, afectando negativamente la experiencia del usuario.

Este problema, identificado como el fallo F77 en WCAG 2.1, compromete el cumplimiento del Criterio de Conformidad 4.1.1: Parsing, el cual exige que el código sea correctamente estructurado para evitar problemas de interpretación.

Acerca de este fallo

El fallo F77 ocurre cuando dentro de un mismo documento HTML o XML se utilizan valores repetidos para el atributo id. Esto puede generar conflictos en la identificación de elementos por parte de tecnologías de asistencia y afectar funcionalidades dependientes de estos identificadores, como:

• Relación entre etiquetas <label> e <input> en formularios.
• Asociación de encabezados en tablas con sus respectivas celdas de datos.
• Uso de scripts que dependen de identificadores únicos.
• Referencias incorrectas en atributos como aria-labelledby, aria-describedby, etc.

Escenarios comunes del fallo

Un id debe ser único en cada documento. Sin embargo, los siguientes casos muestran cómo puede producirse este fallo:

• Formularios mal estructurados: Dos campos de entrada <input> con el mismo id, causando confusión en los lectores de pantalla.
• Tablas mal formateadas: Celdas de datos <td> referenciando múltiples veces el mismo id.
• Scripts con errores: JavaScript o CSS que dependen de identificadores únicos y fallan al encontrar duplicados.

Ejemplos

Ejemplo incorrecto 1: IDs duplicados en etiquetas de formulario

<form>
<label for=»usuario»>Nombre de usuario:</label>
<input type=»text» id=»usuario» name=»usuario»>

<label for=»usuario»>Contraseña:</label>
<input type=»password» id=»usuario» name=»contrasena»>
</form>

🚨 Problema: Ambos campos tienen el mismo id="usuario", lo que impide que los lectores de pantalla asocien correctamente las etiquetas <label> con sus respectivos campos.

Solución correcta: Asignar IDs únicos

✅ ¿Qué mejora?: Cada campo tiene un id único, asegurando que las tecnologías de asistencia asocien correctamente cada <label> con su campo correspondiente.

Ejemplo incorrecto 2: Duplicidad de IDs en una tabla de datos

🚨 Problema: El id="nombre" se repite tanto en el encabezado como en la celda de datos, generando ambigüedad en la asociación de los datos.

Solución correcta: Evitar IDs duplicados

✅ ¿Qué mejora?: Los encabezados <th> tienen identificadores únicos (th-nombre y th-edad), permitiendo que los lectores de pantalla relacionen correctamente cada celda <td> con su respectivo encabezado.

Ejemplo correcto: Solución ideal

<form>
<label for=»email»>Correo electrónico:</label>
<input type=»email» id=»email» name=»email» aria-describedby=»info-email»>
<small id=»info-email»>Usa un correo válido, como nombre@dominio.com</small>
<button type=»submit»>Enviar</button>
</form>

✅ ¿Qué mejora?:

• IDs únicos en todos los elementos.
• aria-describedby correctamente referenciado.
• Estructura accesible y semánticamente correcta.

Errores comunes y cómo evitarlos

Errores frecuentes:

• Repetir valores de id en múltiples elementos.
• No verificar la unicidad de los id en el código HTML.
• Usar el mismo id en diferentes scripts o estilos CSS.

Cómo evitar estos errores:

• Verifica que cada id sea único en la página.
• Usa validadores como el W3C Markup Validator.
• Usa prefijos para diferenciar elementos (form-nombre, tabla-edad, etc.).
• Prefiere class en lugar de id cuando sea posible.

Preguntas frecuentes sobre el fallo F77

¿Por qué los id deben ser únicos en HTML?

Porque tecnologías de asistencia y scripts dependen de estos para identificar elementos y estructurar la información correctamente.

¿Es lo mismo id que class en HTML?

No. id debe ser único en la página, mientras que class puede repetirse en múltiples elementos.

¿Cómo sé si mi código tiene IDs duplicados?

Usa herramientas de validación como el W3C Markup Validator o el inspector de elementos en navegadores.

¿Qué pasa si tengo IDs duplicados en JavaScript?

El código puede fallar al seleccionar elementos, ya que document.getElementById() solo devuelve el primer id encontrado.

¿Afecta a la accesibilidad el uso incorrecto de IDs?

Sí. Los lectores de pantalla y otras tecnologías de asistencia pueden fallar en la interpretación del contenido.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F77: Incumplimiento del Criterio de Conformidad 4.1.1 debido a valores duplicados del tipo ID
• Comprender el criterio de éxito 4.1.1: Análisis (Parsing)
• Uso del atributo ID en HTML
• Validación de marcado W3C
• G108: Uso de funciones de marcado para exponer el nombre y el rol, permitir que las propiedades configurables por el usuario se configuren directamente y proporcionar notificaciones de cambios
• H75: Garantizar que las páginas web estén bien estructuradas

Pruebas y validación

Procedimiento

• Revisar que cada id en el código sea único.
• Usar herramientas de validación para detectar duplicados.
• Asegurar que los id sean utilizados correctamente en etiquetas como label, aria-labelledby, headers, etc.

Resultados esperados

• ✅ Si todos los id son únicos, el contenido cumple con WCAG.
• ❌ Si hay id duplicados, el contenido no cumple y debe corregirse.

Si necesitas ayuda para optimizar la accesibilidad de tu web, contáctanos para una auditoría y soluciones efectivas. 💡