La accesibilidad web busca garantizar que todos los usuarios, incluyendo aquellos que dependen de tecnologías de asistencia, puedan interpretar y navegar el contenido sin dificultad. Un error común ocurre cuando se usan tablas de diseño HTML para organizar visualmente los elementos de una página sin considerar cómo se linealizan en un lector de pantalla.
El fallo F49 ocurre cuando el orden de lectura del contenido en una tabla de diseño no corresponde con la secuencia lógica esperada, afectando la comprensión y navegación de los usuarios.
Este fallo incumple el siguiente criterio de éxito de las WCAG 2.1: 1.3.2: Secuencia significativa → La secuencia del contenido debe preservarse cuando se elimina el estilo visual.
Acerca de este fallo
Las tablas presentan contenido en dos dimensiones: filas y columnas. Sin embargo, los lectores de pantalla interpretan estas tablas de forma lineal, leyendo celda por celda en orden secuencial.
Si se usa una tabla de diseño con una disposición visual que no coincide con su orden en el código fuente, el contenido puede volverse incoherente cuando se linealiza. Esto afecta a usuarios con discapacidades visuales o cognitivas.
Problemas causados por este fallo:
- El contenido pierde su significado cuando se linealiza.
- Los lectores de pantalla presentan la información de manera confusa.
- Los usuarios con discapacidad visual o que navegan con teclado pueden perderse.
Escenarios comunes donde ocurre este fallo:
- Uso de tablas para maquetar páginas en lugar de CSS.
- Contenido visualmente organizado en múltiples columnas dentro de una tabla.
- Navegación intercalada con contenido principal dentro de una tabla.
Ejemplos
Ejemplo incorrecto 1: Uso de tabla de diseño que altera el orden del contenido
En este ejemplo, una tabla de diseño presenta una estructura visual correcta, pero cuando se linealiza, el orden de lectura se desordena.
<table>
<tr>
<td><img src="logo.gif" alt="XYZ montañismo"></td>
<td rowspan="2" valign="bottom">¡Arriba!</td>
</tr>
<tr>
<td>XYZ te lleva a la cima</td>
</tr>
</table>🔴 Problema:
- Un lector de pantalla leerá:
- «XYZ montañismo ¡Arriba!»
- «XYZ te lleva a la cima»
- El significado visual de «¡Arriba!» se pierde, generando confusión.
Solución correcta
El contenido debe organizarse de forma semántica sin depender de la estructura de la tabla.
<div class="header">
<img src="logo.gif" alt="XYZ montañismo">
<span>XYZ te lleva a la cima</span>
</div>
<h1>¡Arriba!</h1>✅ ¿Qué mejora?:
- El orden de lectura es correcto sin importar el estilo visual.
- Se respeta la secuencia significativa del contenido.
Ejemplo incorrecto 2: Menú de navegación intercalado con contenido
Una página de museo usa una tabla para colocar la navegación a la izquierda y el contenido principal a la derecha. Sin embargo, al linealizarse, el contenido se mezcla con los enlaces de navegación.
<table>
<tr>
<td><a href="#">Inicio</a></td>
<td rowspan="20"><img src="obra.png" alt="Pintura del museo"></td>
<td rowspan="6"><h2>Información de la obra</h2></td>
</tr>
<tr>
<td><a href="#">Exposiciones</a></td>
</tr>
<tr>
<td><a href="#">Entradas</a></td>
</tr>
</table>🔴 Problema:
- Un lector de pantalla leerá:
- «Inicio»
- «Exposiciones»
- «Entradas»
- «Pintura del museo»
- «Información de la obra»
- El contenido pierde su estructura lógica.
Solución correcta
La maquetación debe hacerse con CSS en lugar de tablas para que el orden de lectura se mantenga lógico.
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Exposiciones</a></li>
<li><a href="#">Entradas</a></li>
</ul>
</nav>
<section>
<img src="obra.png" alt="Pintura del museo">
<h2>Información de la obra</h2>
</section>✅ ¿Qué mejora?:
- Se respeta la estructura visual sin alterar el orden de lectura.
- Se mejora la experiencia de navegación para todos los usuarios.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar tablas para maquetar en lugar de CSS.
- Posicionar contenido visualmente sin considerar su orden en el código fuente.
- ncluir elementos de navegación dentro de tablas que se intercalan con el contenido principal.
Cómo evitar estos errores:
- Usar CSS para la maquetación en lugar de
<table>. - Mantener la estructura del contenido lógica en el código fuente.
- Probar la linealización con un lector de pantalla o deshabilitando CSS.
Preguntas frecuentes sobre el fallo común F49
¿Las tablas de diseño están prohibidas en WCAG?
No están prohibidas, pero no se recomiendan porque pueden romper el orden lógico de la información cuando se linealizan.
¿Qué alternativa debo usar en lugar de una tabla de diseño?
Usar CSS con flexbox o grid para estructurar visualmente el contenido sin afectar su secuencia.
¿Cómo puedo comprobar si una tabla linealiza correctamente?
Desactiva CSS o usa un lector de pantalla y revisa si el contenido mantiene su orden lógico.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F49: Incumplimiento del Criterio de Conformidad 1.3.2 debido al uso de una tabla de diseño HTML que no tiene sentido cuando se linealiza
- Comprender el criterio de éxito 1.3.2: Secuencia significativa
- C6: Posicionamiento de contenidos basado en marcado estructural
- Guía de diseño accesible sin tablas
Pruebas y validación
Procedimiento
- Deshabilitar CSS y revisar el orden de lectura del contenido.
- Probar la página con un lector de pantalla como NVDA o VoiceOver.
- Verificar que la secuencia de lectura siga el flujo lógico del contenido.
Resultados esperados
- ❌ Si la estructura pierde sentido sin CSS, falla el criterio 1.3.2.
- ✅ Si el contenido mantiene su secuencia lógica, cumple con el criterio 1.3.2.
Evita usar tablas de diseño que rompan la secuencia de lectura lógica. Usa CSS para estructurar contenido y asegúrate de que la información se presente correctamente en cualquier contexto.
💡 Si necesitas ayuda con la accesibilidad de tu web, contáctanos!