Principio 1/1.3 Adaptable/1.3.1-F

1.3.1-F. Tablas estructuradas

1_Perceptible 1.3_Adaptable

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

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)

• La información tabular se debe estructurar mediante elementos de tablas de datos (<table>, <tr>, <th>, <td>).

Comprensión del criterio

Descripción resumida

La información tabular debe estar marcada con etiquetas semánticas de tabla. Esto permite que los usuarios de lectores de pantalla comprendan correctamente la estructura y relaciones entre los datos.

Objetivo

Garantizar que los lectores de pantalla puedan interpretar correctamente las relaciones entre encabezados y celdas de datos al usar marcado de tablas (<table>, <tr>, <th>, <td>).

Importancia de cumplir el criterio

Las tablas mal estructuradas o simuladas visualmente rompen la interpretación del contenido para los usuarios con discapacidad visual y otros usuarios que dependen de tecnologías de apoyo.

Referencias WCAG

• H51: Using table markup to present tabular information
• F34: Failure due to formatting tables with white space characters
• F48: Failure due to using <pre> element for tabular data

Recursos de apoyo

• En PDF, usar etiquetas Table, TR, TH y TD para datos tabulares
• Evitar combinar celdas para mejorar comprensión y accesibilidad
• Usar WAVE para comprobar estructura tabular

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

1. Usar WAVE y revisar “Details – Structural elements”.
2. Comprobar que la tabla se marca como “data table”.
3. Verificar que las celdas de encabezado utilizan <th>.
4. Comprobar que las celdas de datos usan <td> y mantienen relaciones correctas.

Resultado esperado

La información tabular está estructurada correctamente con <table>, <tr>, <th> y <td>.

Ejemplo

Ejemplo correcto:

<table>
 <tr>
  <th>Producto</th>
  <th>Precio</th>
 </tr>
 <tr>
  <td>Café</td>
  <td>2€</td>
 </tr>
</table>

Ejemplo incorrecto:

<p>Producto | Precio</p>
<p>Café | 2€</p>

Otras herramientas de evaluación

• WAVE
• Inspección del navegador

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-F. Tablas estructuradas

Loading comments...