Fallo común Fallos comunes WCAG 2.2

F49Fallo del criterio de conformidad 1.3.2 debido a usar una tabla HTML de maquetación que no tiene sentido al linealizarse

En resumen

Cuando se maqueta una página con tablas, el lector de pantalla lee las celdas de izquierda a derecha y de arriba abajo, incluidas las tablas anidadas, sin tener en cuenta la colocación visual. Si al leer en ese orden lineal el texto se descompone o se mezclan bloques (por ejemplo, un menú intercalado con la descripción de una imagen), se pierde la secuencia significativa. Lo recomendable es maquetar con CSS o comprobar que el orden del código tiene sentido por sí solo.

Aplicabilidad

HTML

Descripción

Aunque las WCAG 2 no prohíben el uso de tablas de maquetación, se recomiendan las maquetaciones basadas en CSS para conservar el significado semántico definido de los elementos table de HTML y para ajustarse a la buena práctica de separar la presentación del contenido. No obstante, si se usa una tabla de maquetación, es importante que el contenido tenga sentido al linealizarse.

Este fallo se produce cuando una secuencia significativa del contenido transmitida mediante la presentación se pierde porque las tablas HTML usadas para controlar la colocación visual del contenido no se «linealizan» correctamente. Las tablas presentan el contenido en dos dimensiones visuales, horizontal y vertical. Sin embargo, los lectores de pantalla presentan este contenido bidimensional en el orden lineal del contenido en el código fuente, empezando por la primera celda de la primera fila y terminando en la última celda de la última fila. El lector de pantalla lee la tabla de arriba abajo, leyendo todo el contenido de cada fila antes de pasar a la fila siguiente. Se lee en voz alta el contenido completo de cada celda de cada fila, incluido el contenido completo de cualquier tabla anidada dentro de una celda. Esto se denomina linealización.

Supongamos que una página web se maqueta con una tabla de 9 columnas y 22 filas. El lector de pantalla lee el contenido de la celda de la columna 1, fila 1, seguido de las celdas de las columnas 2, 3, 4 y así sucesivamente hasta la columna 9. Sin embargo, si alguna celda contiene una tabla anidada, el lector de pantalla leerá la tabla anidada completa antes de leer la siguiente celda de la tabla original (exterior). Por ejemplo, si la celda de la columna 3, fila 6, contiene una tabla de 6 columnas y 5 filas, todas esas celdas se leerán antes que la columna 4, fila 6, de la tabla original (exterior). Como resultado, es posible que la secuencia significativa transmitida mediante la presentación visual no sea perceptible cuando un lector de pantalla lee el contenido en voz alta.

Ejemplos

Una tabla de maquetación que no se linealiza correctamente

Un anuncio hace un uso ingenioso de la colocación visual, pero cambia de significado al linealizarse.

<table>
  <tr>
    <td><img src="logo.gif" alt="XYZ mountaineering"></td>
    <td rowspan="2" valign="bottom">top!</td>
  </tr>
  <tr>
    <td>XYZ gets you to the</td>
  </tr>
</table>

El orden de lectura de este ejemplo sería:

«XYZ mountaineering top!»
«XYZ gets you to the»

Una tabla de maquetación que separa una secuencia significativa al linealizarse

La página web de una exposición de un museo coloca una barra de navegación con una larga lista de enlaces en el lado izquierdo de la página. A la derecha de la barra de navegación hay una imagen de uno de los cuadros de la exposición. A la derecha de la imagen está el tipo de texto de «cartela» que se vería en la pared junto a la obra si se estuviera en el museo. Debajo de ese texto hay un encabezado que dice «Description» (descripción), y debajo de ese encabezado hay una descripción de la imagen. La imagen, el texto de la cartela, el encabezado «Description» y el texto de la descripción forman una secuencia significativa.

Se usa una tabla de maquetación para colocar los elementos de la página. Los enlaces de la barra de navegación están repartidos en distintas celdas de la columna de la izquierda.

<table>
  <tr>
    <td><a href="#">Link 1</a></td>
    <td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
    <td rowspan="6"><img src="placard.png" alt="Placard text"></td> 
  </tr> 
  <tr>
    <td><a href="#">Link 2</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 3</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 4</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 5</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 6</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 7</a></td>
    <td rowspan="2"><h2>Image Heading</h2></td> 
  </tr> 
  <tr>
    <td><a href="#">Link 8</a></td>
  </tr>
  <tr>
    <td><a href="#">Link 9</a></td>
    <td rowspan="12">Description of the image</td> 
  </tr> 
  <tr>
    <td><a href="#">Link 10</a></td>
  </tr>
    ...
  <tr>
    <td><a href="#">Link 20</a></td>
  </tr>
</table>

El orden de lectura de este ejemplo sería:

Link 1 (enlace 1)
Image (imagen)
Placard Text (texto de la cartela)
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Image Heading (encabezado de la imagen)
Link 8
Link 9
Link 10
...
Link 20

Como los enlaces de la barra de navegación quedan intercalados con el contenido que describe la imagen, los lectores de pantalla no pueden presentar el contenido en una secuencia significativa que se corresponda con la secuencia presentada visualmente.

Pruebas

Procedimiento

Linealizar el contenido de una de estas dos formas:
- Presentar el contenido en el orden del código fuente
- Eliminar el marcado de tabla que rodea el contenido
Comprobar que el orden de lectura lineal coincide con cualquier secuencia significativa transmitida mediante la presentación.

Resultados esperados

Si la comprobación n.º 2 es falsa, se da esta condición de fallo y el contenido falla este criterio de conformidad.

Cómo lo comprobamos en ADDAW

Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F49 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.