2526UPSA2.4.5-B-000
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.5-B
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
Archivo:NoAccesible245.png 2025 26 UFV 2.4.5-B NOA.png
b) Enlace de donde se ha obtenido la imagen:
https://www.pennyjuice.com/
2.1.2. Código HTML:
<!DOCTYPE html>
🛒 TechStore Online
⚠️ PROBLEMA DE ACCESIBILIDAD: Este sitio web SOLO tiene el menú de navegación como forma de encontrar productos. No hay buscador, mapa del sitio, ni otras alternativas.
Productos Destacados
💻
Portátil Gaming Pro
1.299€
📱
Smartphone XL
899€
🎧
Auriculares Bluetooth
149€
⌚
Smartwatch Sport
299€
¿Por qué esto NO es accesible?
- Solo existe el menú desplegable multinivel como método de navegación
- No hay buscador interno
- No hay mapa del sitio
- No hay breadcrumbs (migas de pan)
- No hay enlaces relacionados ni otras formas de encontrar productos
Explicación del problema detectado:
El sitio web presenta una violación del criterio 2.4.5-B al proporcionar
únicamente un menú de navegación desplegable multinivel como método para
localizar contenido. No incluye ninguna alternativa como buscador interno,
mapa del sitio, breadcrumbs, índice de contenidos o enlaces relacionados.
Esto obliga a todos los usuarios a utilizar el mismo método de navegación,
independientemente de sus capacidades o preferencias.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
- Usuarios con discapacidad cognitiva: Pueden tener dificultad recordando
la estructura compleja del menú multinivel y perderse fácilmente en la jerarquía de categorías.
- Usuarios con discapacidad motora: Navegar por menús desplegables que
requieren precisión con el ratón puede ser extremadamente difícil o imposible para personas con temblores o control motor limitado.
- Usuarios de lectores de pantalla: Deben escuchar toda la estructura
del menú repetidamente para encontrar contenido, lo que resulta tedioso y consume mucho tiempo. Sin un buscador o mapa del sitio, no tienen forma rápida de acceder a páginas específicas.
- Usuarios con discapacidad visual: Sin breadcrumbs ni indicadores claros
de ubicación, es difícil saber dónde se encuentran dentro del sitio.
- Usuarios con dispositivos de asistencia: Métodos alternativos de
navegación son esenciales cuando los menús desplegables no funcionan bien con ciertos dispositivos adaptativos.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
Archivo:Accesible245.png 2025 26 UFV 2.4.5-B ACC.png
b) Enlace de donde se ha obtenido la imagen:
https://www.europarl.europa.eu/portal/en
2.2.2 Código HTML:
<!DOCTYPE html>
🛒 TechStore Online
✅ SITIO ACCESIBLE: Este sitio cumple con WCAG 2.4.5-B proporcionando múltiples vías de navegación.
Productos Destacados
💻
Portátil Gaming Pro
1.299€
📱
Smartphone XL
899€
🎧
Auriculares Bluetooth
149€
⌚
Smartwatch Sport
299€
✅ Múltiples vías de navegación implementadas:
- Buscador: Campo de búsqueda visible en el encabezado
- Menú de navegación: Menú principal con categorías
- Breadcrumbs: Migas de pan mostrando la ubicación actual
- Sidebar con enlaces: Categorías populares y enlaces rápidos
- Mapa del sitio: Disponible en el footer
- Enlaces relacionados: En cada sección
Explicación de la solución aplicada:
Este sitio web cumple correctamente con el criterio 2.4.5-B al proporcionar
múltiples vías independientes para localizar contenido:
1. Buscador interno: Campo de búsqueda visible y accesible en el encabezado
de todas las páginas, permitiendo búsqueda directa por palabras clave.
2. Menú de navegación principal: Menú jerárquico con categorías organizadas
lógicamente.
3. Breadcrumbs (migas de pan): Indicadores de ubicación que muestran la
ruta actual y permiten navegación rápida a niveles superiores.
4. Sidebar con enlaces directos: Categorías populares y enlaces rápidos a
secciones destacadas (ofertas, más vendidos, novedades).
5. Mapa del sitio: Enlace visible en el footer que proporciona una vista
completa de toda la estructura del sitio.
6. Enlaces relacionados: Organizados por secciones temáticas en el footer.
Esta implementación permite que usuarios con diferentes capacidades y preferencias elijan el método de navegación que mejor se adapte a sus necesidades, cumpliendo así con el principio de múltiples vías.
