Principio 1/1.3 Adaptable/1.3.1-G

1.3.1-G. Celdas de encabezado identificadas

1_Perceptible 1.3_Adaptable

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

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 datos se deben identificar las celdas de encabezado con el elemento <th> y las celdas de datos con <td>.

Comprensión del criterio

Descripción resumida

Las tablas deben utilizar celdas de encabezado <th> para identificar correctamente las filas y columnas.

Esto permite a los lectores de pantalla anunciar los encabezados antes de cada dato, facilitando la comprensión de la relación entre celdas.

Objetivo

Garantizar que los usuarios puedan comprender las relaciones entre los datos tabulares y los encabezados correspondientes mediante tecnologías de apoyo.

Importancia de cumplir el criterio

Sin <th>, los usuarios de lectores de pantalla reciben datos sin contexto. El etiquetado correcto permite interpretar correctamente la tabla incluso en formatos alternativos.

Referencias WCAG

• H51: Using table markup to present tabular information
• F91: Failure for not marking up table headers properly

Recursos de apoyo

Consejos

• Marcar las tablas con (<table>,<th>, <tr>,<td>)

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Wave.

1. Paso 1. Abrir WAVE y seleccionar Details – Structural elements.
2. Paso 2. Comprobar, para cada tabla de datos, que se identifiquen en la herramienta los elementos de encabezado mediante table header cell.

Resultado esperado

Las tablas de datos usan <th> para encabezados y <td> para celdas de datos, con roles correctamente interpretados por productos de apoyo.

Ejemplo

Se presenta un codigo con etiquetas HTML correctas, <th> para marcar el encabezado y <td> para marcar los datos de cada columna.

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

Otras herramientas de evaluación

• Inspección del navegador Observar si elementos que visualmente son tablas están marcados como tal en el código fuente

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-G. Celdas de encabezado identificadas

Loading comments...