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

• Usar etiquetas (<table>,<th>, <tr>,<td>) para datos tabulares presentados en tabla
• Evitar combinar celdas para mejorar comprensión y accesibilidad

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Wave.

1. Paso 1. Seleccionar Details – Structural elements.
2. Paso 2. Comprobar que la información tabular se identifica en la herramienta mediante elementos data table.

Resultado esperado

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

Ejemplo

Se presenta un codigo con etiquetas HTML correctas para incluir una tabla.

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

Otras herramientas de evaluación

• Bookmarklet Get table data pemite obtener los datos de una tabla.
• Web developer Toolbar Tiene la opción de outline - outline table que permite mostrar donde estan situadas las tablas y luego mirar que codigo HTML presentan
• Inspección del navegador Observar si elementos que visualmente son tablas están marcados como tañ en el código fuente

Comentarios

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

Loading comments...