Principio 1/1.3 Adaptable/1.3.1-J
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
1.3.1-J. Uso de summary en tablas de datos
- Nivel: A
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.3_Adaptable
- Grupo: Estructura y relaciones
- Subgrupo: Resumen de tabla (summary)
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera moderada
-
Sordoceguera –
Barrera moderada
Enunciado del criterio (Observatorio de Accesibilidad Web)
- En las tablas de datos que disponen de un atributo summary, dicho atributo debe describir la organización de la tabla o explicar cómo se usa.
Comprensión del criterio
Descripción resumida
Si una tabla incluye el atributo summary (obsoleto en HTML5), este debe proporcionar una descripción clara de cómo están organizados los datos o cómo se debe navegar por la tabla.
Objetivo
Proporcionar una visión general para ayudar a las personas usuarias, especialmente quienes utilizan lectores de pantalla, a entender la estructura y organización de una tabla compleja antes de interactuar con ella.
Importancia de cumplir el criterio
Un summary adecuado orienta a los usuarios sobre la estructura de una tabla compleja, facilitando su comprensión y navegación cuando se accede con tecnologías de apoyo.
Referencias WCAG
Recursos de apoyo
Consejo
- Incluir en el atributo summary una descripción adecuada al contenido de la tabla de datos
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Identificar tablas complejas en la página.
- Paso 2. Usando la herramienta de inspección de código del navegador, comprobar que, si existe el atributo summary , éste proporciona una descripción de cómo se organizan los datos o de cómo se usa o navega por la tabla.
Resultado esperado
Si el atributo summary está presente, proporciona una descripción adecuada de la información que contiene la tabla o de su uso.
Ejemplo ilustrativo
Tabla con atributo summary.
<table summary="Esta tabla muestra las ventas trimestrales organizadas por producto y región."> (aqui el código html de la tabla) </table>
Otras herramientas de evaluación
- Inspección del navegador: comprobar el codigo fuente que hay en elementos tabla
- Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si al leer una tabla, se indica un resumen y este es adecuado a la información que contiene la tabla
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-J. Uso de summary en tablas de datos
Loading comments...
