2.4.8 Ubicación
Criterio de éxito oficial
Está disponible información sobre la ubicación del usuario dentro de un conjunto de páginas web.
¿Qué es?
Este criterio exige que el sitio indique dónde está el usuario dentro de su estructura. Las personas que llegan a una página desde un buscador, un enlace externo o al volver de una sección profunda necesitan orientarse rápidamente.
¿Por qué es importante?
Los indicadores de ubicación reducen la desorientación, especialmente para personas con discapacidades cognitivas que pueden perder el hilo de navegación. También facilitan el retorno a secciones anteriores y ayudan a comprender la estructura del sitio.
¿Quién se ve afectado?
Personas con discapacidades cognitivas: Pueden perder el contexto de navegación. Las migas de pan y los menús resaltados les ayudan a reorientarse.
Personas con baja visión: Al ampliar la pantalla, los elementos de contexto global pueden desaparecer del campo visual. Las migas de pan siempre presentes ayudan a mantener la orientación.
Todos los usuarios: Cualquier usuario que llega a una página interna desde un buscador se beneficia de saber dónde está dentro de la estructura del sitio.
Cómo implementar 2.4.8
Migas de pan (breadcrumbs)
Las migas de pan son la técnica más completa para indicar ubicación en sitios jerárquicos:
Anatomía de unas migas de pan
<nav aria-label="Ruta de navegación">
<ol>
<li><a href="/">Inicio</a></li>
<li><a href="/recursos/">Recursos</a></li>
<li aria-current="page">Ubicación</li>
</ol>
</nav>Menú con ítem activo resaltado
El ítem del menú correspondiente a la página actual debe estar visualmente diferenciado y marcado con aria-current="page":
Ejemplos prácticos
Correcto Migas de pan en e-commerce
Una tienda online muestra «Inicio › Ropa › Camisetas › Camiseta azul marino» en la parte superior de cada página de producto. El usuario sabe exactamente dónde está en la jerarquía del catálogo.
Correcto Menú resaltado en documentación
Un portal de documentación tiene un menú lateral. El ítem de la página actual aparece en negrita, con fondo azul claro y un borde izquierdo, marcado con aria-current="page".
Fallo Página sin contexto de ubicación
Un blog con 5 niveles de categorías no tiene migas de pan ni resalta el ítem del menú activo. Un usuario que llega desde Google a un artículo no tiene forma de saber en qué parte del sitio está.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G65 | Proporcionar una pista de exploración (breadcrumb) | Suficiente |
| G63 | Proporcionar un mapa del sitio | Suficiente |
| G128 | Indicar la ubicación actual dentro de los menús de navegación | Suficiente |
| G127 | Identificar una página web dentro de un conjunto de páginas | Complementaria |
Errores comunes
- Migas de pan que no incluyen
aria-current="page"en el último elemento. - Menú que no distingue visualmente el ítem de la página activa.
- El resaltado del ítem activo depende solo del color sin otra diferencia visual (fallo del criterio 1.4.1).
- Migas de pan que no enlazan a las páginas padre, reduciendo su utilidad.