2526UdL1.4.13-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
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<div class="category-item" x-data="{ show: false }"
@mouseover="show = true"
@mouseleave="show = false">
<a href="/informatica">Informàtica</a>
<div class="submenu" x-show="show" style="display: none;">
<a href="/portatils">Ordinadors Portàtils</a>
<a href="/sobretaula">Ordinadors de Sobretaula</a>
<a href="/components">Components i Peces</a>
<a href="/periferics">Perifèrics (Monitors, Teclats)</a>
</div>
</div>
Explicación del problema detectado:
En aquest cas, el menú només s’obre quan l’usuari passa el ratolí per damunt de l’element. Això implica que la interacció depèn exclusivament de l’esdeveniment mouseover.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afecta persones amb mobilitat reduïda que naveguen utilitzant únicament el teclat, no poden accedir al submenú. Com que no es gestionen esdeveniments amb teclat el contingut desplegable queda inaccessible per a aquests usuaris.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<a href="/informatica"
class="category-link"
@mouseover="open = true"
@focus="open = true"
@blur="setTimeout(() => { if (! $el.parentElement.contains(document.activeElement)) open = false }, 100)"
aria-haspopup="true"
:aria-expanded="open.toString()">
Informàtica
</a>
<div class="submenu"
Explicación de la solución aplicada:
En aquesta versió, el menú desplegable és accessible perquè no depèn únicament del ratolí per funcionar. Permet que les persones que naveguen amb la tecla Tab puguin accedir al submenú.
