Fallo Común F46 de WCAG 2.1: Uso de elementos de tabla en tablas de diseño

La accesibilidad web busca garantizar que todas las personas puedan comprender y navegar el contenido de manera efectiva. Un error común ocurre cuando las tablas de diseño incluyen elementos semánticos como <th>, <caption> o el atributo summary, lo que puede confundir a los usuarios de tecnologías de asistencia.

El fallo F46 ocurre cuando se usan tablas para disposición visual en lugar de estructurar datos, y al mismo tiempo se incluyen elementos de tabla que implican una relación semántica errónea. Esto afecta especialmente a los usuarios de lectores de pantalla, quienes esperan que las tablas contengan información tabular real.

Este fallo incumple el siguiente criterio de éxito de las WCAG 2.1 1.3.1: Información y relaciones → El uso incorrecto de elementos semánticos en tablas de diseño introduce relaciones falsas en el contenido.

Acerca de este fallo

Las tecnologías de asistencia dependen de la estructura semántica del HTML para presentar la información de manera significativa. El uso incorrecto de elementos como <th>, <caption> o summary en tablas que solo sirven para maquetación genera confusión en los usuarios.

Problemas causados por este fallo:

• Los lectores de pantalla interpretan la tabla como datos tabulares cuando no lo es.
• Se introducen encabezados y descripciones irrelevantes, haciendo que la navegación sea más difícil.
• Se dificulta la comprensión del contenido, ya que los usuarios pueden esperar relaciones que en realidad no existen.

Escenarios comunes donde ocurre este fallo:

• Uso de <th> en una tabla de diseño para resaltar texto.
• Uso de <caption> para describir una tabla utilizada solo para disposición visual.
• Uso del atributo summary para explicar una tabla de diseño.

Ejemplos

Ejemplo incorrecto 1: Uso de <th> en una tabla de diseño

En este ejemplo, se usa una tabla solo para organizar el contenido, pero incluye un encabezado <th>, lo que hace que los lectores de pantalla interpreten erróneamente la información como una tabla de datos.

<table>
  <tr>
    <th colspan="3">Título de la página</th>
  </tr>
  <tr>
    <td><div>Menú de navegación</div></td>
    <td><div>Contenido principal</div></td>
    <td><div>Barra lateral</div></td>
  </tr>
  <tr>
    <td colspan="3">Pie de página</td>
  </tr>
</table>

🔴 Problema:

• El <th> indica incorrectamente que hay una relación de encabezado dentro de la tabla.
• Los usuarios de lectores de pantalla esperarán datos tabulares en lugar de una disposición visual.

Solución correcta

En lugar de usar una tabla para la maquetación, es mejor utilizar CSS con display: grid o display: flex para organizar los elementos visualmente.

<div class="layout">
  <header>Título de la página</header>
  <nav>Menú de navegación</nav>
  <main>Contenido principal</main>
  <aside>Barra lateral</aside>
  <footer>Pie de página</footer>
</div>

✅ ¿Qué mejora?:

• Se mantiene la estructura semántica sin usar una tabla de diseño.
• Se mejora la accesibilidad y la flexibilidad del diseño.

Ejemplo incorrecto 2: Uso de <caption> en una tabla de diseño

Este código usa <caption> en una tabla que no presenta datos tabulares.

<table>
  <caption>Diseño de la página</caption>
  <tr>
    <td>Menú</td>
    <td>Contenido</td>
    <td>Barra lateral</td>
  </tr>
</table>

🔴 Problema:

• <caption> indica que la tabla tiene un propósito informativo cuando en realidad solo organiza elementos visualmente.
• Los lectores de pantalla anunciarán «Diseño de la página» antes de interpretar la tabla, lo cual no aporta valor.

Solución correcta

Usar CSS para la disposición en lugar de una tabla.

<div class="contenedor">
  <div class="menu">Menú</div>
  <div class="contenido">Contenido</div>
  <div class="barra-lateral">Barra lateral</div>
</div>

✅ ¿Qué mejora?:

• Se evita el uso de etiquetas de tabla para diseño.
• Se mantiene la accesibilidad sin introducir información errónea.

Errores comunes y cómo evitarlos

Errores frecuentes

• Usar tablas para diseño en lugar de CSS.
• Incluir <th>, <caption> o summary en tablas de maquetación.
• No verificar el impacto de tablas en usuarios de tecnologías de asistencia.
• Agregar atributos innecesarios a tablas que solo cumplen un rol visual.

Cómo evitar estos errores

• Usar CSS en lugar de tablas para organizar contenido visualmente.
• Evitar elementos de tabla semánticos en tablas de diseño como <th> y <caption>.
• Probar el sitio con lectores de pantalla para verificar que las tablas se interpretan correctamente.
• Eliminar atributos summary en tablas de diseño o asegurarse de que estén vacíos si son requeridos.

Preguntas frecuentes sobre el fallo común F46

¿Puedo usar tablas para maquetar mi contenido?

No es recomendable. Las tablas deben utilizarse para presentar datos tabulares. Para la maquetación visual, es mejor usar CSS con display: grid o display: flex.

¿Por qué es un problema usar <th> o <caption> en una tabla de diseño?

Porque estos elementos indican a los lectores de pantalla que la tabla contiene datos estructurados, cuando en realidad solo se usa para maquetación. Esto puede confundir a los usuarios que dependen de tecnologías de asistencia.

¿Cuál es la mejor alternativa para crear un diseño sin tablas?

Usar CSS para la disposición de los elementos, con flexbox o grid. Estos métodos proporcionan una estructura más accesible y flexible.

¿Cómo puedo verificar si mi tabla es de diseño o de datos?

Si la tabla no contiene información estructurada en filas y columnas, sino que solo organiza contenido visualmente, es una tabla de diseño y debe reemplazarse por CSS.

¿Cómo afectan las tablas de diseño a los usuarios de lectores de pantalla?

Los lectores de pantalla pueden interpretar incorrectamente la estructura, anunciando encabezados y relaciones de datos que no existen, lo que dificulta la comprensión del contenido.

¿Es aceptable dejar un atributo summary vacío en una tabla de diseño?

Sí, aunque lo ideal es no incluir el atributo summary en absoluto en una tabla de diseño. Un summary vacío no afecta negativamente, pero tampoco aporta valor.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F46: Incumplimiento del Criterio de Conformidad 1.3.1 debido al uso de elementos, tablas de diseño
• Comprender el criterio de éxito 1.3.1 Información y relaciones
• H39: Uso de elementos de título para asociar títulos de tablas de datos con tablas de datos
• H51: Uso de marcado de tabla para presentar información tabular
• Buenas prácticas en tablas HTML

Pruebas y validación

Procedimiento

1. Identificar tablas en el código fuente y verificar si se usan solo con fines visuales.
2. Revisar si las tablas de diseño incluyen <th>, <caption> o un atributo summary no vacío.
3. Comprobar si el contenido dentro de la tabla realmente presenta datos tabulares.

Resultados esperados

• ❌ Si la tabla de diseño contiene <th>, <caption> o summary, falla el criterio 1.3.1.
• ✅ Si la tabla solo organiza elementos visualmente sin estos atributos, cumple con el criterio 1.3.1.

Evita el uso de tablas para diseño y asegúrate de que los elementos semánticos reflejen su propósito real. Usa CSS para organizar contenido y garantizar una experiencia accesible para todos los usuarios.

💡 Si necesitas ayuda con la accesibilidad de tu web, contáctanos!