Principio 3/3.2 Predecible/3.2.3-A
De WCAG Wiki
- Nivel: AA
- Versión: 2.0
- Principio: 3_Comprensible
- Pauta: 3.2_Predecible
- Grupo: Consistencia
- Subgrupo: Navegacion
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Cognitiva –
Barrera moderada
-
Baja visión –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Los enlaces y mecanismos de navegación que se repiten en un sitio web deben aparecer siempre en el mismo orden relativo.
Comprensión del criterio
Descripción resumida
Los menús, cabeceras, pies y otros elementos de navegación repetidos mantienen la misma posición y orden en todas las páginas del sitio.
Objetivo
Facilitar que las personas aprendan el patrón de navegación y localicen opciones de forma predecible y eficiente en todo el sitio.
Importancia de cumplir el criterio
La consistencia reduce la carga cognitiva, mejora la orientación y beneficia a usuarios con dificultades cognitivas, baja visión y a quienes usan lectores de pantalla.
Referencias WCAG
Recursos de apoyo
- Patrones de diseño consistentes (design systems)
- Landmarks semánticos:
<nav>,<header>,<aside>,<footer>
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Identificar elementos de navegación repetidos (menú global, buscador, footer, sidebar).
- Paso 2. Revisar varias páginas y comprobar que mantienen el mismo orden relativo y posición.
- Paso 3. Validar que las etiquetas (texto/ARIA) y el orden de tabulación son consistentes.
- Paso 4. Verificar con teclado y lector de pantalla la previsibilidad de la navegación.
Resultado esperado
Los mecanismos de navegación repetidos conservan el mismo orden relativo y posición en todas las páginas del sitio.
Ejemplo ilustrativo
✅ Navegación consistente
<nav aria-label="Navegación principal">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/productos">Productos</a></li>
<li><a href="/soporte">Soporte</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
✅ Variación justificada en navegación secundaria
<nav aria-label="Navegación principal">…</nav> <nav aria-label="Submenú de la sección actual">…</nav>
Otras herramientas de evaluación
- Comparación entre páginas (capturas / inspección DOM)
- Revisión de landmarks y roles
- Navegación por teclado
- NVDA, JAWS, VoiceOver
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 3.2.3-A. Navegación coherente
Loading comments...
