Principio 2/2.4 Navegable/2.4.1-A
De WCAG Wiki
< Principio 2 | 2.4 Navegable
2.4.1-A. Saltar bloques repetidos
- Nivel: A
- Versión: 2.2
- Principio: 2_Operable
- Pauta: 2.4_Navegacion_clara
- Grupo: Navegación
- Subgrupo: Estructura_y_saltos
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Motriz –
Barrera grave
-
Cognitiva –
Barrera grave
-
Baja visión –
Barrera moderada
-
Visual total –
Barrera moderada
-
Auditiva –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Se debe permitir saltar los bloques de contenido repetido en múltiples páginas web, bien agrupando el contenido repetido de forma que los productos de apoyo lo puedan saltar (por ejemplo, usando encabezados al comienzo de cada sección de contenido) o bien mediante la creación de enlaces de salto.
Comprensión del criterio
Descripción resumida
Los usuarios deben poder saltar el contenido repetido (como menús o cabeceras) y acceder directamente al contenido principal mediante enlaces de salto o estructura semántica adecuada.
Objetivo
Facilitar que los usuarios que navegan secuencialmente con teclado o lector de pantalla puedan ir directamente al contenido principal sin recorrer elementos repetidos.
Importancia de cumplir el criterio
Sin enlaces de salto o estructura adecuada, los usuarios deben recorrer repetidamente navegación y bloques fijos, lo que ralentiza la interacción y genera fatiga cognitiva y motriz.
Referencias WCAG
Recursos de apoyo
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
- Identificar bloques repetidos (menú, header, sidebar).
- Comprobar si existe un enlace para saltar al contenido.
- Verificar que el enlace aparece al recibir foco (Tab).
- Confirmar que lleva al área principal (id="main" / <main>).
- Comprobar que funciona con teclado y lector de pantalla.
Resultado esperado
Existe un mecanismo visible al foco para saltar bloques repetidos y funciona correctamente.
Ejemplo ilustrativo
✅ Accesible
<a href="#main" class="skip-link">Saltar al contenido principal</a> <nav> … </nav> <main id="main">Contenido principal…</main>
❌ No accesible
<nav> … menú … </nav> <main>Contenido</main>
Otras herramientas de evaluación
- AXE, WAVE, Accessibility Insights
- Pruebas con NVDA, JAWS, VoiceOver
- Tab para comprobar aparición y funcionamiento del enlace
- Verificar uso de <main> y encabezados estructurales
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.1-A. Saltar bloques repetidos
Loading comments...
