Principio 2/2.4 Navegable/2.4.6-A
De WCAG Wiki
< Principio 2 | 2.4 Navegable
2.4.6-A. Encabezados descriptivos
- Nivel: AA
- Versión: 2.0
- Principio: 2_Operable
- Pauta: 2.4_Navegacion_clara
- Grupo: Estructura_de_contenido
- Subgrupo: Encabezados_y_organización
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Cognitiva –
Barrera grave
-
Baja visión –
Barrera moderada
-
Visual total –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Los encabezados utilizados en una página deben describir el tema o propósito de la sección que encabezan.
Comprensión del criterio
Descripción resumida
Los encabezados deben comunicar claramente el contenido que presentan, facilitando la orientación, lectura y escaneo rápido de la página.
Objetivo
Permitir que los usuarios identifiquen rápidamente la estructura y propósito de cada sección sin leer todo el contenido.
Importancia de cumplir el criterio
Una jerarquía clara y encabezados descriptivos ayudan a las personas con discapacidad cognitiva, usuarios de lectores de pantalla y quienes escanean visualmente la información para localizar contenido relevante sin esfuerzo.
Referencias WCAG
- Understanding Success Criterion 2.4.6: Headings and Labels — W3C
- WCAG 2.2 Quick Reference — 2.4.6
- Guía Técnica WCAG — Principio Operable (documento aportado)
Recursos de apoyo
- Buenas prácticas para estructura semántica H1–H6
- Guía ARIA para encabezados y navegación por estructura
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Revisar si la página utiliza encabezados HTML (`h1`–`h6`).
- Paso 2. Comprobar que cada encabezado describe claramente el contenido de su sección.
- Paso 3. Evaluar que la jerarquía de encabezados es lógica y consistente.
- Paso 4. Navegar con lector de pantalla usando comandos de encabezados para confirmar orientación correcta.
Resultado esperado
Los encabezados describen adecuadamente su contenido, siguen un orden jerárquico correcto y permiten comprender y navegar la página con facilidad.
Ejemplo ilustrativo
✅ Ejemplo accesible: encabezados descriptivos y estructurados
<h1>Guía de solicitud de becas</h1> <h2>Requisitos para aplicar</h2> <h3>Documentación necesaria</h3>
Otras herramientas de evaluación
- JAWS, NVDA, VoiceOver — navegación por encabezados
- WAVE y AXE — revisión de estructura semántica
- Web Developer Toolbar — outline de encabezados
- Herramientas del navegador — inspección de DOM
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 2.4.6-A. Encabezados descriptivos
Loading comments...
