Principio 1/1.3 Adaptable/1.3.1-F

De WCAG Wiki

1.3.1-F. Tablas estructuradas

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)

  • 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










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

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

Loading comments...




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