Principio 2/2.4 Navegable/2.4.5-A
De WCAG Wiki
< Principio 2 | 2.4 Navegable
2.4.5-A. Mapa del sitio o búsqueda en sitios grandes
- Nivel: AA
- Versión: 2.0
- Principio: 2_Operable
- Pauta: 2.4_Navegable
- Grupo: Navegación
- Subgrupo: Localización_de_contenido
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Cognitiva –
Barrera grave
-
Motriz –
Barrera moderada
-
Visual total –
Barrera grave
-
Sordoceguera
–
Barrera grave
Enunciado del criterio (Observatorio de Accesibilidad Web)
- En los sitios web grandes, donde no se puede acceder directamente a todas las páginas desde el menú de navegación, se debe proporcionar un mapa del sitio o una función de búsqueda dentro del sitio web.
Comprensión del criterio
Descripción resumida
Los sitios extensos (que tienen una gran cantidad de páginas) deben ofrecer alternativas como un buscador interno o un mapa del sitio en HTML para facilitar encontrar contenido cuando la navegación es compleja o extensa.
Objetivo
Asegurar que las personas usuarias dispongan de diferentes métodos para localizar contenido y orientarse en sitios grandes, especialmente cuando la navegación tradicional no es suficiente.
Importancia de cumplir el criterio
Sin un buscador o mapa del sitio, los usuarios pueden perderse fácilmente o invertir más esfuerzo cognitivo, afectando especialmente a quienes tienen dificultades para procesar o explorar múltiples opciones de navegación.
Referencias WCAG
Recursos de apoyo
No hay
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Verificar que existe un mapa del sitio o una función de búsqueda dentro del sitio web.
Resultado esperado
El sitio incluye al menos un método adicional para localizar contenido (buscador accesible o mapa del sitio) y funciona correctamente.
Ejemplo ilustrativo
El ejemplo seria un sitio web grande (con más de 10-20 páginas) con buscador y con mapa web.
Otras herramientas de evaluación
- Revisión de navegación: comprobar que, en sitios grandes, existe más de una forma de localizar páginas (p. ej., menú principal, buscador interno, mapa del sitio, rutas de migas de pan, índice A-Z).
- Inspección funcional: verificar que el buscador interno o el mapa del sitio son visibles, operables y llevan a contenido relevante.
- Comprobación del menú y jerarquía: revisar que el menú no es la única vía para acceder a contenido profundo cuando es extenso o jerárquico.
- Lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que las distintas vías son accesibles y están correctamente etiquetadas (regiones, roles, encabezados).
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.5-A. Mapa del sitio o búsqueda en sitios grandes
Loading comments...
