2526UPSA3.2.3-A

De WCAG Wiki

Edición de la página como formulario

1. Información básica

Id del criterio: 3.2.3 - Navegación consistente (Nivel: AA)
Título del subcriterio: 1.3.2-A
Universidad participante: UPSA
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_3/3.2_Predecible/3.2.3-A



2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.upsa.es/

2.1.2. Código HTML:

<header id="site-header">

   <nav id="main-nav">
  • <a href="/grados">Grados</a>
  • <a href="/admision">Admisión</a>
  • <a href="/investigacion">Investigación</a>
   </nav>
       <button aria-label="Abrir buscador general"></button>

</header>

<header id="library-header">

       <input type="text" placeholder="Buscar libros, revistas...">
       <button>Buscar</button>
   <nav id="library-nav">
  • <a href="/mi-cuenta">Mi Cuenta</a>
  • <a href="/bases-datos">Bases de datos</a>
   </nav>

</header>



Explicación del problema detectado:
Al navegar desde la página principal de la UPSA hacia sub-sitios del mismo dominio (como la Biblioteca o el Campus), se pierde la consistencia en la navegación. En la web principal, el usuario dispone de un menú de navegación global y un buscador situado a la derecha. Sin embargo, al cambiar de sección, estos mecanismos de navegación desaparecen o cambian su orden relativo

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Esto desorienta a los usuarios, especialmente a aquellos con discapacidades cognitivas o usuarios de lectores de pantalla, que esperan encontrar los enlaces comunes (como "Inicio", "Contacto" o el buscador general) siempre en el mismo lugar relativo para poder navegar con fluidez por el ecosistema de la universidad.


2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.amazon.es/XIAOMI-Pulgadas-Control-Compatible-AirPlay/dp/B0F457MQCQ/?_encoding=UTF8&pd_rd_w=tOYL8&content-id=amzn1.sym.0a1e4d50-7b96-465b-86c1-adb7e525fae2&pf_rd_p=0a1e4d50-7b96-465b-86c1-adb7e525fae2&pf_rd_r=6K1B224TZRK8CMC413S2&pd_rd_wg=nm9Xi&pd_rd_r=47b7a70e-a502-4f5c-b7f1-01f78954511e&ref_=pd_hp_d_atf_unk&th=1


2.2.2 Código HTML:



Explicación de la solución aplicada:
El código muestra la barra de navegación principal (#nav-main) que contiene el menú desplegable "Todo" a la izquierda y una lista horizontal de enlaces a secciones clave (#nav-xshop) como "Novedades" o "Prime". Este mecanismo de navegación se repite de forma idéntica y en el mismo orden relativo en la página de inicio, páginas de producto y categorías. Esto garantiza una navegación coherente, permitiendo al usuario predecir la ubicación de los menús y enlaces principales en todo el sitio web.