Principio 1/1.3 Adaptable/1.3.1-L

1.3.1-L. Tablas de maquetación limpias

1_Perceptible 1.3_Adaptable

• Nivel: A
• Versión: 2.0
• Principio: 1_Perceptible
• Pauta: 1.3_Adaptable
• Grupo: Estructura y relaciones
• Subgrupo: Tablas de maquetación

Discapacidades afectadas

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

• Visual total – Barrera leve
• Sordoceguera – Barrera leve

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> ni atributos scope o headers.

Comprensión del criterio

Descripción resumida

Cuando una tabla se usa únicamente para maquetación visual (algo que ahora ya no se hace porque el codigo CSS ha evolucionado mucho), 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: Using caption elements to associate data table captions with data tables
• H73: Using the summary attribute to describe the organization of data tables
• H43: Using id and headers attributes to associate cells in data tables
• H63: Using scope to associate header cells and data cells
• F46: Failure due to using th elements in layout tables

Recursos de apoyo

Consejos

• No usar <nowiki> , , ni atributos summary, scope, headers en tablas de diseño
• No usar tabla para maquetación, y si se hace debe tener sentido al leerse linealmente
• Usar codigo CSS como grid y flex en lugar de tablas para maquetación

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Localizar las tablas de maquetación que existan en la página.
2. Paso 2. Usando la herramienta de inspección de código del navegador, verificar que no se utilizan elementos o atributos propios de las tablas de datos

Resultado esperado

Si existen tablas de maquetación, estas no incluyen elementos semánticos propios de tablas de datos.

Ejemplo

Codigo HTML de una tabla solo para maquetación.

<table>
 <tr><td>Texto</td><td>Imagen</td></tr>
</table>

Otras herramientas de evaluación

• Web Developer Toolbar seleccionar Miscellaneous - Linearize page y comprobar que la información que se muestra en forma lineal es comprensible.
• Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si se accede a una tabla decorativa, no se lee como una tabla de datos.

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...