Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F49Tablas de maquetación que se leen en un orden sin sentido

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.3.2 debido a usar una tabla HTML de maquetación que no tiene sentido al linealizarse

En pocas palabras

Cuando una página se maqueta con tablas, el lector de pantalla no sigue la colocación visual. Lee celda a celda, fila por fila, y entra en cada tabla anidada antes de seguir. Si en ese orden los textos se cortan o se mezclan, el contenido pierde su sentido.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee una tabla de izquierda a derecha y de arriba abajo. A esto se le llama linealizar: convertir la tabla en una sola secuencia de texto.

Si una frase está partida entre celdas de filas distintas, se oye desordenada. Si un menú largo ocupa la columna izquierda, puede colarse entre una foto y su descripción. La persona oye trozos sueltos y no puede reconstruir el mensaje.

Cómo evitarlo

  1. Maquete con CSS (grid o flex). Así el código puede seguir un orden lógico aunque el diseño coloque las cosas en columnas.
  2. Si mantiene una tabla de maquetación, deje cada bloque de contenido completo dentro de una misma celda.
  3. No reparta una frase o un mensaje entre varias celdas con rowspan o colspan.
  4. Evite las tablas anidadas. Si las usa, asegúrese de que su contenido se entiende leído de seguido.
  5. Coloque las celdas de modo que, leídas fila a fila, el menú y el contenido principal no se intercalen.

Cómo comprobarlo

  1. Vea el contenido en el orden del código. Por ejemplo, con la opción de linealizar tablas de la extensión Web Developer.
  2. Otra opción: copie todo el texto de la página y péguelo en un editor de texto sencillo.
  3. Lea el resultado de arriba abajo. Las frases deben estar completas y cada bloque debe ir junto.
  4. Confírmelo escuchando la página con NVDA o VoiceOver de principio a fin.
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica F49 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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

  1. 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
  2. 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 error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F49 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.