Principio 1/1.3 Adaptable/1.3.1-I
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
1.3.1-I. Uso de caption en tablas de datos
- Nivel: A
- Versión: 2.2
- Principio: 1_Perceptible
- Pauta: 1.3_Adaptable
- Grupo: Estructura y relaciones
- Subgrupo: Caption 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 grave
-
Baja visión –
Barrera moderada
-
Cognitiva –
Barrera leve
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
- Abrir Web Developer Toolbar → “Outline table captions”.
- Verificar que el título está dentro de <caption>.
- 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 ilustrativo
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
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 1.3.1-I. Uso de caption en tablas de datos
Loading comments...
