Fallo Común F34 de WCAG 2.1: Uso de caracteres de espacio en blanco para formatear tablas en contenido de texto sin formato

Jano Llorca Lis

Las tablas son una herramienta fundamental para organizar y presentar información de manera estructurada. Sin embargo, cuando se crean tablas utilizando caracteres de espacio en blanco, como espacios, tabulaciones o saltos de línea, se compromete la accesibilidad del contenido. Los lectores de pantalla y otras tecnologías de asistencia no pueden interpretar la relación entre las celdas, lo que impide una navegación y comprensión adecuadas.

El fallo 34 incumple los criterios de conformidad 1.3.1 – Información y relaciones y 1.3.2 – Secuencia significativa de las WCAG 2.1, ya que los datos no se presentan en un orden comprensible ni con una estructura semántica adecuada.

Acerca de este fallo

Este fallo ocurre cuando se intenta simular una tabla en texto sin formato utilizando espacios y tabulaciones para alinear los datos. Algunos problemas derivados incluyen:

Falta de estructura semántica, impidiendo la correcta asociación de encabezados con datos.
Orden de lectura inconsistente, dificultando la interpretación por parte de tecnologías de asistencia.
Problemas de reflujo, donde la información se desordena si el usuario cambia el tamaño del texto o la fuente.

Este error afecta a:

Usuarios con discapacidad visual que dependen de lectores de pantalla para interpretar tablas.
Usuarios con discapacidad cognitiva, quienes pueden tener dificultades para comprender información mal estructurada.
Usuarios que personalizan la apariencia del texto, ya que la tabla puede desorganizarse si cambian el tamaño de fuente o el espaciado.

Ejemplos

Ejemplo incorrecto: Uso de espacios en blanco para formatear una tabla

Menú
         Desayuno        Almuerzo       Cena
Lunes    Tostadas        Sopa de tomate Ensalada
         Café            Hamburguesa    Pollo frito
         Jugo de naranja Puré de papa   Frijoles verdes

🔴 Problema:

Los lectores de pantalla leerán la tabla línea por línea, sin respetar la estructura tabular.
Los encabezados no se asocian correctamente con los datos.
Si el usuario cambia el tamaño del texto, el contenido puede desorganizarse.

Solución correcta: Uso de etiquetas HTML de tabla

<table>
  <caption>Menú semanal</caption>
  <thead>
    <tr>
      <th>Día</th>
      <th>Desayuno</th>
      <th>Almuerzo</th>
      <th>Cena</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lunes</td>
      <td>Tostadas y café</td>
      <td>Sopa de tomate y hamburguesa</td>
      <td>Pollo frito y frijoles verdes</td>
    </tr>
  </tbody>
</table>

✅ ¿Qué mejora?:

Se utiliza la etiqueta <table> para definir una estructura semántica clara.
Se emplean <th> para los encabezados, facilitando su asociación con los datos.
Los lectores de pantalla pueden interpretar correctamente la tabla y permitir una navegación adecuada.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar espacios y tabulaciones en lugar de etiquetas <table>.
No definir encabezados de columna y fila.
No probar la tabla con un lector de pantalla.

Cómo evitar estos errores:

Utilizar siempre marcado HTML adecuado para las tablas.
Asegurar que los encabezados están correctamente definidos con <th>.
Probar la accesibilidad con herramientas como NVDA o VoiceOver.

Preguntas frecuentes sobre el fallo común F34

¿Por qué no es recomendable usar espacios en blanco para crear tablas?

Porque los lectores de pantalla no pueden interpretar la estructura correctamente, afectando la accesibilidad.

¿Cómo se pueden crear tablas accesibles?

Utilizando etiquetas <table>, <th>, <tr> y <td> en HTML para definir una estructura clara.

¿Los espacios en blanco afectan solo a los lectores de pantalla?

No, también pueden causar problemas de visualización en diferentes dispositivos y configuraciones de usuario.

¿Qué hacer si necesito presentar datos en un documento de texto sin formato?

Considerar utilizar listas estructuradas o proporcionar una versión alternativa con tabla HTML.

¿Puedo usar CSS para mejorar la presentación de tablas?

Sí, pero la semántica HTML debe mantenerse intacta para garantizar la accesibilidad.

¿Cómo puedo comprobar si mi tabla es accesible?

Usando herramientas como WAVE, Axe o NVDA para verificar la correcta estructura y navegación.

Recursos relacionados

Pruebas y validación

Procedimiento

Examinar el documento y localizar tablas creadas con espacios en blanco.
Comprobar si las tablas están correctamente estructuradas con etiquetas semánticas (<table>, <th>, <td>).
Utilizar un lector de pantalla para verificar la correcta lectura de la tabla.
Ajustar el tamaño del texto y comprobar si la estructura se mantiene.

Resultados esperados

✅ Si la tabla está correctamente definida en HTML y puede ser interpretada por un lector de pantalla, cumple con los criterios WCAG.
❌ Si la tabla está formateada con espacios en blanco y no se lee correctamente con tecnologías de asistencia, falla en los criterios 1.3.1 y 1.3.2.

Las tablas deben crearse con un marcado semántico adecuado, evitando el uso de espacios en blanco para su formato. Aplicar las técnicas correctas no solo mejora la accesibilidad, sino también la compatibilidad con distintos dispositivos y configuraciones de usuario.

¿Necesitas mejorar la accesibilidad de tu web? Contáctanos para asesoría experta.

¿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.