Fallo Común F91 de WCAG 2.1: No marcar correctamente los encabezados de las tablas

Las tablas son una herramienta fundamental para presentar datos estructurados en la web. Sin embargo, cuando no se marcan correctamente los encabezados de las tablas, los usuarios de lectores de pantalla no pueden interpretar correctamente la relación entre los datos y los encabezados, lo que afecta gravemente la accesibilidad.

Este problema incumple el Criterio de Conformidad 1.3.1 de WCAG 2.1 (Información y Relaciones), ya que la estructura de la tabla no está programáticamente determinada.

En este artículo, exploraremos el Fallo F91, sus efectos en la accesibilidad y cómo corregirlo con buenas prácticas.

Acerca de este fallo

El Fallo F91 ocurre cuando una tabla de datos no utiliza elementos th para los encabezados ni otros mecanismos adecuados (scope, headers, id o atributos ARIA como columnheader y rowheader).

Esto impide que las tecnologías de asistencia determinen correctamente los encabezados de cada celda de datos, dificultando la navegación y comprensión de la tabla.

¿Cómo afecta la accesibilidad?

  • Los usuarios de lectores de pantalla no reciben la información contextual de los datos, lo que dificulta su comprensión.
  • Al navegar horizontal o verticalmente, los encabezados no se leen correctamente.
  • Personas con discapacidades cognitivas pueden perder la relación entre las filas y columnas.
  • Errores en la presentación de datos, causando confusión en la interpretación de información clave.

Ejemplos

Ejemplo incorrecto 1: Falta de encabezados th

Este código no usa th para los encabezados, sino td, lo que impide que los lectores de pantalla los reconozcan correctamente.

<table>
<tr>
<td>Nombre</td>
<td>Edad</td>
<td>Altura (cm)</td>
<td>Peso (kg)</td>
</tr>
<tr>
<td>Linda</td>
<td>33</td>
<td>169</td>
<td>59</td>
</tr>
<tr>
<td>Jack</td>
<td>37</td>
<td>184</td>
<td>74</td>
</tr>
</table>

🔴 Problema: No se han usado th, por lo que los encabezados no son interpretados correctamente por lectores de pantalla.

Solución correcta: Uso de th

<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Altura (cm)</th>
<th>Peso (kg)</th>
</tr>
<tr>
<td>Linda</td>
<td>33</td>
<td>169</td>
<td>59</td>
</tr>
<tr>
<td>Jack</td>
<td>37</td>
<td>184</td>
<td>74</td>
</tr>
</table>

✅ ¿Qué mejora?:

  • Los encabezados son correctamente reconocidos por los lectores de pantalla.
  • Se mantiene la relación entre los datos y los encabezados.
  • Mayor claridad para todos los usuarios.

Ejemplo incorrecto 2: Encabezados sin scope en una tabla compleja

Si una tabla tiene más de una fila de encabezados, es necesario indicar el ámbito de cada th con scope.

<table>
<tr>
<th>Curso</th>
<th>1° Examen</th>
<th>2° Examen</th>
<th>Final</th>
</tr>
<tr>
<td>Matemáticas</td>
<td>85</td>
<td>90</td>
<td>88</td>
</tr>
<tr>
<td>Historia</td>
<td>78</td>
<td>85</td>
<td>82</td>
</tr>
</table>

🔴 Problema: Los encabezados no indican si aplican a una fila o columna, lo que genera confusión en los lectores de pantalla.

Solución correcta: Uso del atributo scope

<table>
<tr>
<th scope=»col»>Curso</th>
<th scope=»col»>1° Examen</th>
<th scope=»col»>2° Examen</th>
<th scope=»col»>Final</th>
</tr>
<tr>
<td>Matemáticas</td>
<td>85</td>
<td>90</td>
<td>88</td>
</tr>
<tr>
<td>Historia</td>
<td>78</td>
<td>85</td>
<td>82</td>
</tr>
</table>

✅ ¿Qué mejora?:

  • Se indica que los encabezados aplican a las columnas.
  • Los lectores de pantalla interpretan correctamente la relación entre datos.
  • Se mejora la accesibilidad y usabilidad.

Errores comunes y cómo evitarlos

Errores frecuentes

  • Usar td en lugar de th para encabezados.
  • No incluir scope en tablas complejas.
  • No utilizar headers e id en tablas con múltiples niveles.
  • Omitir roles ARIA en tablas con estructura compleja.

Cómo evitarlos

  • Usa th para los encabezados de la tabla.
  • Agrega el atributo scope="col" o scope="row" según corresponda.
  • Usa headers e id en tablas con múltiples niveles.
  • Implementa aria-columnheader y aria-rowheader si es necesario.

Preguntas frecuentes sobre el Fallo F91

¿Por qué es importante usar th en lugar de td para los encabezados?

Porque los lectores de pantalla identifican automáticamente los th como encabezados, proporcionando contexto a los usuarios con discapacidades visuales.

¿Cuándo debo usar scope en mis tablas?

Cuando la tabla tiene más de un nivel de encabezados y es necesario definir su relación con las celdas de datos.

¿Cómo puedo probar si mis encabezados están bien asociados?

Puedes usar herramientas como axe DevTools, WAVE o el Inspector de Accesibilidad de Chrome.

¿Qué alternativa hay para tablas muy complejas?

Puedes usar headers e id o atributos ARIA como aria-labelledby.

¿Se puede usar th en cualquier tabla?

No. Si la tabla es solo para diseño, es mejor usar CSS en lugar de marcar encabezados innecesarios.

Recursos relacionados

Pruebas y validación

Procedimiento

  • Verifica que los encabezados están marcados con th.
  • Revisa que los atributos scope, headers o ARIA están correctamente implementados.
  • Usa herramientas como WAVE para comprobar la accesibilidad.

Resultados esperados

  • ✅ Si los encabezados están correctamente marcados, el contenido es accesible.
  • ❌ Si no se cumplen los criterios, la tabla es inaccesible y debe corregirse.

Marcar correctamente los encabezados de las tablas es clave para la accesibilidad. ¡Asegúrate de que todos los usuarios puedan acceder a la información correctamente! 🚀

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.

Solicitar Consultoría

Textos legales

Redes sociales

Linkedin