2526UPSA1.4.1.3-A-001
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_1/1.4_Distinguible/1.4.13-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
[[1](https://www.druni.es/vegan-gel-polish-hi-hybrid-esmalte-semipermanente) [2](https://www.druni.es/vegan-gel-polish-hi-hybrid-esmalte-semipermanente)]
2.1.2. Código HTML:
<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">
<!-- Submenú que aparece solo con 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">
<!-- Submenú que aparece solo con hover -->
<a href="/ofertas/dia">Del día</a>
<a href="/ofertas/semana">De la semana</a>
</div>
</li>
</ul>
</nav>
<!-- Problema: el contenido emergente solo aparece con hover, no es accesible con teclado ni fácil de cerrar. -->
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.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
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.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.druni.es/
2.2.2 Código HTML:
<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>
<!-- Corrección:
- Se añade soporte para focus (teclado).
- Se añade aria-expanded para lectores de pantalla.
- El submenú puede cerrarse con blur.
- Se mantiene accesible y manejable. -->
Explicación de la solución aplicada:
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.
