Fallo Común F90 de WCAG 2.1: Asociación incorrecta de encabezados de tablas con los atributos id y headers

Las tablas son elementos clave para estructurar y presentar datos en la web. Sin embargo, cuando los encabezados no se asocian correctamente con las celdas de contenido, los usuarios de lectores de pantalla no pueden interpretar la información de manera eficaz.

El Fallo F90 ocurre cuando la relación entre los encabezados (th) y las celdas de datos (td) en una tabla no está programáticamente determinada debido a un uso incorrecto de los atributos id y headers.

Este error afecta la accesibilidad y viola el Criterio de Conformidad 1.3.1 de WCAG 2.1 (Información y Relaciones), que establece que las relaciones entre los elementos deben ser comprensibles para las tecnologías de asistencia.

Acerca de este fallo

Los usuarios con discapacidad visual suelen depender de tecnologías de asistencia, como lectores de pantalla, para comprender la estructura de una tabla. Si los encabezados de columna o fila no están correctamente asociados con sus respectivas celdas de datos, la información se vuelve confusa o ininterpretable.

Este problema ocurre en tablas complejas con múltiples niveles de encabezados, donde los desarrolladores utilizan los atributos id y headers para establecer relaciones explícitas entre celdas, pero cometen errores al hacerlo.

Escenarios donde ocurre este fallo:

• Se copian tablas sin actualizar los valores de id y headers, lo que provoca referencias incorrectas.
• Se enlazan celdas de datos a encabezados equivocados.
• Se ignoran las jerarquías en tablas complejas con múltiples niveles de encabezados.

Ejemplos

Ejemplo incorrecto 1: Asociación errónea de id y headers

🔴 Problema:

• Los valores en el atributo headers enlazan incorrectamente las celdas de datos con encabezados equivocados.
• Las celdas de «Proyectos» están referenciando encabezados de «Exámenes», lo que confunde a los usuarios de tecnologías de asistencia.

Solución correcta: Asociación adecuada de encabezados con id y headers

✅ ¿Qué mejora?:

• Se corrigen los atributos headers, asegurando que cada celda de datos esté correctamente asociada a su encabezado correspondiente.
• Ahora los usuarios de lectores de pantalla pueden interpretar la tabla correctamente sin confusiones.

Errores comunes y cómo evitarlos

Errores frecuentes

• Asociar id y headers incorrectamente, enlazando celdas con encabezados erróneos.
• No actualizar id y headers al copiar tablas en código.
• Usar headers en tablas simples donde no es necesario.

Cómo evitar estos errores

• Revisa la estructura de la tabla y confirma que headers enlaza correctamente cada celda con su encabezado.
• Usa herramientas como NVDA o VoiceOver para probar la accesibilidad de las tablas.
• En tablas simples, usa <th scope="col"> y <th scope="row"> en lugar de headers para evitar errores.

Preguntas frecuentes sobre el Fallo F90

¿Cuándo debo usar headers e id en tablas?

Cuando tienes tablas complejas con múltiples niveles de encabezados que necesitan relaciones explícitas.

¿Puedo usar scope en lugar de headers?

Sí, en tablas simples scope="col" y scope="row" son más fáciles de implementar y reducen errores.

¿Cómo pruebo si mi tabla es accesible?

Puedes usar lectores de pantalla como NVDA, JAWS o VoiceOver, además de herramientas como axe DevTools o WAVE.

¿Qué pasa si no corrijo este error?

Los usuarios con discapacidad visual no podrán entender correctamente la relación entre los datos en la tabla, afectando su experiencia de navegación.

¿Este error afecta solo a HTML?

Sí, el fallo F90 está específicamente relacionado con tablas en HTML y su asociación incorrecta de encabezados.

¿Hay herramientas que me ayuden a validar mis tablas?

Sí, WAVE, axe DevTools, Tota11y y los validadores de accesibilidad de WCAG pueden ayudarte a identificar errores en las tablas.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F90: Fallo del Criterio de Conformidad 1.3.1 por asociar incorrectamente encabezados de tablas y contenido a través de los encabezados y atributos de identificación
• Comprender el criterio de éxito 1.3.1 Información y relaciones
• G115: Uso de elementos semánticos para marcar la estructura
• H43: Uso de los atributos id y headers para asociar celdas de datos con celdas de encabezado en tablas de datos
• F46: Incumplimiento del criterio de éxito 1.3.1 debido al uso de elementos th, … tablas de diseño
• Guía de accesibilidad de tablas en W3C
• Uso correcto de id y headers en HTML

Pruebas y validación

Procedimiento

1. Revisa que cada celda de datos (td) tenga su encabezado correctamente enlazado con headers.
2. Usa un lector de pantalla para verificar que la tabla se lea en el orden correcto.
3. Valida la estructura de la tabla con WAVE o axe DevTools.

Resultados esperados

• ✅ Si los encabezados están correctamente asociados, el contenido cumple con WCAG 2.1.
• ❌ Si hay asociaciones incorrectas, la tabla es inaccesible y debe corregirse.

Corregir la asociación de encabezados en tablas es esencial para garantizar la accesibilidad. Si necesitas ayuda para mejorar la accesibilidad de tu sitio web, contáctanos y hazlo inclusivo para todos. 🚀