Principio 1/1.3 Adaptable/1.3.1-I

De WCAG Wiki

1.3.1-I. Uso de caption en tablas de datos

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)

  • En las tablas de datos que disponen de un título, este se debe identificar mediante el elemento <caption> y dicho título debe identificar adecuadamente la tabla.

Comprensión del criterio

Descripción resumida

Las tablas que incluyen un título deben marcarlo con <caption>. Este título debe ser conciso y describir el propósito o el contenido principal de la tabla.

Objetivo

Permitir que los lectores de pantalla anuncien el título cuando la tabla recibe el foco, ayudando a las personas usuarias a comprender de inmediato su contenido y finalidad.

Importancia de cumplir el criterio

El <caption> ofrece una referencia clara del tema de la tabla. Para usuarios con lectores de pantalla es la primera información que escuchan, ayudando a contextualizar los datos rápidamente.

Referencias WCAG

  • H39: Using caption elements to associate data table captions with data tables

Recursos de apoyo

  • Incluir título visual antes de la tabla
  • Usar <caption> como primer hijo de <table>
  • Título conciso que describa el propósito

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Abrir Web Developer Toolbar → “Outline table captions”.
  2. Verificar que el título está dentro de <caption>.
  3. Comprobar que el título describe el contenido de la tabla de forma clara y breve.

Resultado esperado

La tabla presenta un título marcado mediante <caption> y este describe de forma adecuada su contenido.

Ejemplo

Ejemplo correcto:
<table>
 <caption>Ventas trimestrales por producto</caption>
 <tr>
  <th>Producto</th><th>Q1</th><th>Q2</th>
 </tr>
 <tr>
  <td>Café</td><td>300</td><td>280</td>
 </tr>
</table>

Ejemplo incorrecto:

<p><strong>Ventas trimestrales</strong></p>
<table>
 <!-- Falta caption -->
 ...
</table>

Otras herramientas de evaluación

  • Web Developer Toolbar
  • 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-I. Uso de caption en tablas de datos

Loading comments...