Principio 1/1.3 Adaptable/1.3.1-L

De WCAG Wiki

1.3.1-L. Tablas de maquetación limpias

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • En las tablas de maquetación no se deben emplear elementos o atributos propios de las tablas de datos (<th>, <caption>, summary, scope, headers).

Comprensión del criterio

Descripción resumida

Cuando una tabla se usa únicamente para maquetación visual, no debe incluir marcado semántico de datos como títulos, celdas de encabezado ni atributos para relacionar celdas. Estas tablas deben ser puramente estructurales y comprensibles en lectura lineal.

Objetivo

Evitar que los lectores de pantalla confundan tablas de diseño con tablas de datos, asegurando que la estructura semántica sea coherente y no genere falsas relaciones entre celdas.

Importancia de cumplir el criterio

Usar marcado semántico en tablas de maquetación genera confusión para usuarios con lectores de pantalla, quienes pueden interpretar la tabla como información estructurada cuando solo es una distribución visual.

Referencias WCAG

  • H39: Caption en tablas de datos
  • H73: Uso de summary en tablas de datos
  • H43: Uso de id y headers
  • H63: Uso de scope
  • F46: Failure por usar <th> en tablas de maquetación

Recursos de apoyo

  • No usar <th>, <caption> ni atributos summary, scope, headers en tablas de diseño
  • Una tabla de maquetación debe tener sentido al leerse linealmente
  • Usar CSS moderno (grid, flex) en lugar de tablas para maquetación

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Identificar tablas usadas para maquetación (sin datos tabulares reales).
  2. Revisar el código HTML para asegurar que no contienen <th>, <caption>, summary, scope ni headers.
  3. Linealizar la página (por ejemplo, con Web Developer Toolbar) y verificar que el contenido sigue siendo lógico.

Resultado esperado

Las tablas de maquetación no incluyen elementos semánticos propios de tablas de datos.

Ejemplo

Ejemplo correcto (tabla solo para maquetación): 
<table>
 <tr><td>Texto</td><td>Imagen</td></tr>
</table>

Ejemplo incorrecto: 

<table>
 <caption>Diseño de página</caption>
 <tr>
  <th>Columna</th><td>Contenido</td>
 </tr>
</table>

Otras herramientas de evaluación

  • Inspección del navegador
  • Web Developer Toolbar (opción “Linearize page”)










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-L. Tablas de maquetación limpias

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-L&oldid=3383»