Editar ActividadWCAG: 2526UPSA1.4.1.3-A-001

No tienes permiso para modificar esta página, por el siguiente motivo:

La acción que has solicitado está restringida a los usuarios de uno de estos 3 grupos: Administradores, alumnos, profesores.

1. Información básica[editar | editar código]

1.1. Id del criterio:
Selecciona el criterio concreto

1.2. Id del subcriterio:
Selecciona el código que identifica el subcriterio

1.3. Indica tu universidad:
Selecciona el acrónimo de tu universidad

1.4. Indica el curso académico:
Selecciona el curso académico actual

1.5. Enlace directo al subcriterio en la wiki: Incluye el enlace al subcriterio directo https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.13-A Puedes consultar el índice completo de la wiki WCAG y seleccionar tu subcriterio concreto

2. Ejemplos prácticos[editar | editar código]

Introduce la información respecto a cada ejemplo (accesible y no accesible). Tienes dos opciones:

a. Incluir una captura de imagen de una web y el enlace de donde se ha obtenido el ejemplo.
b. Incluir un código HTML propio representando el ejemplo

2.1. Ejemplo NO Accesible[editar | editar código]

2.1.1. Evidencia (Imagen/Enlace o código)

2.1.1.a Imagen/Enlace no accesible

📤 Sube tu imagen de evidencia no accesible
Puedes hacer clic en “Subir archivo” o seleccionar un archivo ya existente en la wiki

Al subir el fichero, usa un nombre identificativo, por ejemplo:

Cada fichero tiene una nomenclatura:
* Curso de creación: 2025_26_
* Universidad: UdL
* Identificador del subcriterio: 1.1.1-A
* No accesible: NOA
Por ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg

1. Subir la imagen de la evidencia: Subir archivo
También puedes 🗂️ No se pueden emplear las etiquetas <html> si no es en las páginas normales. e incluirla en el cuadro de texto.

2 Enlace de la web donde se detectó el problema: Por ejemplo: https://www.unawebconlabarrera.com

2.1.1.b. Código HTML no accesible

Incluir código HTML: NOTA: Incluye el codigo entre etiquetas <nowiki> y </nowiki>

<nowiki> <nav class="navigation juicer-menu horizontal-menu-type" @mouseover="!touchevents ? hover = true : ''" @mouseleave="!touchevents ? hover = false : ''"> <ul> <li class="menu-item"> <a href="/productos">Productos</a> <div class="submenu" x-show="hover">  <a href="/productos/cosmetica">Cosmética</a> <a href="/productos/perfumes">Perfumes</a> </div> </li> <li class="menu-item"> <a href="/ofertas">Ofertas</a> <div class="submenu" x-show="hover">  <a href="/ofertas/dia">Del día</a> <a href="/ofertas/semana">De la semana</a> </div> </li> </ul> </nav>  </nowiki>

2.1.2. Explicación del problema detectado: Al llevar el ratón y hacer hover por encima de los elementos de la navbar se despliega toda una variedad de opciones de productos, pero en ningún momento se quitan, ni al quitar el ratón del sitio en el que inicialmente hiciste hover. El problema está en que no hay ningún botón de "X" para poder salir de ese menú desplegable que ocupa toda la pantalla. Entonces la única manera de salir es hacer click en cualquier otro link del navbar o volver a la página principal de Druni haciendo click en el logo. Explica qué problema tiene el código, imagen o enlace que has incluido.

2.1.3. Personas afectadas y barreras: Este problema afecta principalmente a personas con movilidad reducida, usuarios que navegan únicamente con teclado y personas con discapacidad visual que utilizan lectores de pantalla, ya quelos contenidos que aparecen solo mediante hover no son fácilmente controlables ni accesibles sin el uso preciso del ratón. La barrera que se genera es de interacción y control, porque los menús o elementos emergentes pueden desaparecer involuntariamente, cubrir otros contenidos o no activarse mediante foco, provocando frustración, pérdida de acceso a opciones importantes y dificultad para completar tareas de forma autónoma. Explica qué problema tiene los usuarios que se enfrentan con este problema.

2.2. Ejemplo Accesible[editar | editar código]

2.2.1. Evidencia (Imagen/Enlace o código)

2.2.1.a Imagen/Enlace Accesible

📤 Sube tu imagen de evidencia accesible
Puedes hacer clic en “Subir archivo” o seleccionar un archivo ya existente en la wiki

Al subir el fichero, usa un nombre identificativo, por ejemplo:

Cada fichero tiene una nomenclatura:
* Curso de creación: 2025_26_
* Universidad: UdL
* Identificador del subcriterio: 1.1.1-A
* No accesible: ACC
Por ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg

1. Subir la imagen de la evidencia: Subir archivo
También puedes 🗂️ No se pueden emplear las etiquetas <html> si no es en las páginas normales. e incluirla en el cuadro de texto.

2. Enlace de la web donde se observó la evidencia: Por ejemplo: https://www.unawebconlabarrera.com

2.2.1.b. Código HTML accesible

Incluir código HTML: NOTA: Incluye el codigo entre etiquetas <nowiki> y </nowiki>

<nowiki> <nav class="navigation juicer-menu horizontal-menu-type"> <ul> <li class="menu-item" x-data="{ open: false }"> <a href="/productos" @mouseover="open = true" @mouseleave="open = false" @focus="open = true" @blur="open = false" aria-haspopup="true" :aria-expanded="open.toString()"> Productos </a> <div class="submenu" x-show="open" tabindex="-1"> <a href="/productos/cosmetica">Cosmética</a> <a href="/productos/perfumes">Perfumes</a> </div> </li> <li class="menu-item" x-data="{ open: false }"> <a href="/ofertas" @mouseover="open = true" @mouseleave="open = false" @focus="open = true" @blur="open = false" aria-haspopup="true" :aria-expanded="open.toString()"> Ofertas </a> <div class="submenu" x-show="open" tabindex="-1"> <a href="/ofertas/dia">Del día</a> <a href="/ofertas/semana">De la semana</a> </div> </li> </ul> </nav>  </nowiki>

2.2.2. Explicación de la solución: En este caso hemos integrado la solución a este problema haciendo que el sub-menú no dependa solo del hover: también se abre con @focus (permite usar teclado) y se cierra con @blur y @mouseleave, evitando que el contenido emergente se quede "atrapado" o desaparezca sin control. Además, se añaden atributos ARIA (aria-haspopup y aria-expanded ) que informan a los lectores de pantalla de que el enlace despliega un sub-menú y de si está abierto o cerrado, y el sub-menú se mantiene disponible mientras el usuario interactúa, cumpliendo así con el requisito de que el contenido mostrado por hover o focus sea perceptible, manejable y accesible. Explica porque la evidencia que se ha incluido es un ejemplo accesible.

Resumen:

Cancelar

Anónimo

Buscar

Editar ActividadWCAG: 2526UPSA1.4.1.3-A-001

Espacios de nombres

Más

Acciones de página

Sumario

1. Información básica[editar | editar código]

2. Ejemplos prácticos[editar | editar código]

2.1. Ejemplo NO Accesible[editar | editar código]

2.2. Ejemplo Accesible[editar | editar código]

Navegación

Navegación

Herramientas wiki

Herramientas wiki

Anónimo

Buscar

Editar ActividadWCAG: 2526UPSA1.4.1.3-A-001

1. Información básica[editar | editar código]

2. Ejemplos prácticos[editar | editar código]

2.1. Ejemplo NO Accesible[editar | editar código]

2.2. Ejemplo Accesible[editar | editar código]

Navegación

Herramientas wiki

Herramientas de página