Principio 2/2.4 Navegable/2.4.5-B

De WCAG Wiki

2.4.5-B. Acceso directo en sitios pequeños

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • En los sitios web pequeños donde no exista un mapa del sitio o una función de búsqueda, se debe poder acceder directamente a todas las páginas del sitio web desde el menú de navegación o desde un listado de enlaces accesible.

Comprensión del criterio

Descripción resumida

En sitios pequeños, la navegación debe permitir acceder a todas las páginas sin necesidad de buscador o mapa del sitio. El menú principal o un listado accesible debe ofrecer acceso directo a todas las secciones.

Objetivo

Garantizar que los usuarios puedan localizar cualquier página de forma rápida y clara en sitios pequeños, sin depender de múltiples niveles de navegación o herramientas adicionales.

Importancia de cumplir el criterio

Cuando no existe buscador ni mapa del sitio, el acceso directo desde el menú es esencial para evitar pérdida de orientación, especialmente para usuarios con discapacidades cognitivas, visuales o que navegan solo con teclado.

Referencias WCAG

  • W3C WCAG 2.2 – Success Criterion 2.4.5 Multiple Ways
  • Understanding 2.4.5: Multiple Ways (W3C)
  • Guía Técnica WCAG – Principio Operable (documento aportado)

Recursos de apoyo

  • Buenas prácticas en menús accesibles
  • Patrones WAI-ARIA para navegación

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Determinar si el sitio es pequeño (estructura sencilla, pocas páginas).
  2. Paso 2. Comprobar que todas las páginas son accesibles desde el menú o un listado visible.
  3. Paso 3. Verificar que los enlaces del menú son navegables por teclado y correctamente etiquetados.
  4. Paso 4. Probar lectura y recorrido con lector de pantalla para confirmar claridad y coherencia.

Resultado esperado

El sitio pequeño permite acceder a todas sus páginas desde el menú o un listado visible y accesible, sin necesidad de buscador ni mapa del sitio.

Ejemplo ilustrativo

✅ Ejemplo accesible 

<nav aria-label="Menú principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/quienes-somos">Quiénes somos</a></li>
    <li><a href="/servicios">Servicios</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>


Otras herramientas de evaluación

  • Navegación por teclado
  • JAWS, NVDA, VoiceOver
  • Inspección semántica de navegación (<nav>, roles ARIA)










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ 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> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ 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

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ 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-B. Acceso directo en sitios pequeños

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.5-B&oldid=3471»