Principio 2/2.4 Navegable/2.4.5-A

De WCAG Wiki

2.4.5-A. Mapa del sitio o búsqueda en sitios grandes

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 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 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, las personas usuarias 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

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Verificar si el sitio es grande o con muchas secciones.
  2. Comprobar la existencia de una función de búsqueda interna accesible o un mapa del sitio estructurado.
  3. Probar navegación por teclado y lector de pantalla en buscador y/o mapa.
  4. Evaluar que el mapa del sitio sea claro, estructurado y funcional.

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

✅ Buscador interno accesible 

<form role="search" aria-label="Buscar en el sitio">
  <label for="buscar">Buscar:</label>
  <input id="buscar" name="q" type="search" placeholder="Buscar contenido...">
  <button type="submit">Buscar</button>
</form>

✅ Mapa del sitio en HTML 

<nav aria-label="Mapa del sitio">
  <ul>
    <li><a href="/cursos">Cursos</a></li>
    <li><a href="/investigacion">Investigación</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

❌ Sitio grande sin alternativas 

<nav>…menú principal largo…</nav>
<!-- No hay buscador ni mapa -->


Otras herramientas de evaluación

  • Pruebas con teclado
  • JAWS, NVDA y VoiceOver
  • Revisión manual del sitemap










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-A. Mapa del sitio o búsqueda en sitios grandes

Loading comments...




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