2526UPSA2.4.3-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.3-B
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://sunnystore.es/?srsltid=AfmBOop9stX5_9rdNTuxtBrw0MFwcLd03uuNRUfYqTgyN4gBjwfQ3KYG
2.1.2. Código HTML:
<button id="openMenu">Menú</button>
<nav id="menu" hidden>
<a href="#a">Opción A</a>
<a href="#b">Opción B</a>
</nav>
<script>
const btn = document.getElementById('openMenu');
const menu = document.getElementById('menu');
btn.addEventListener('click', () => {
menu.hidden = false;
});
</script>
Explicación del problema detectado:
El problema que presenta la imagen es de la página web adjuntada de ejemplo. En la página web hay un chatbot al que se puede llegar con la navegación por teclado, que se despliega cuando pulsas en el botón del chatbot.
Al pulsar ese botón se despliega un chatbot. Si sigues navegando con teclado por el apartado que se ha desplegado llegará un punto que seguirás navegando por la página web y no se habrá quedado navegando sólo en el apartado del chatbot.
El código HTML vemos un ejemplo de como se haría mal este criterio ya que en ningún momento se usa la función focus para solo navegar por el menú una vez desplegado.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
El incumplimiento de este criterio afecta principalmente a usuarios con discapacidades motoras que navegan exclusivamente con el teclado, generándoles una fatiga física y desorientación al obligarles a realizar saltos erráticos e impredecibles por la pantalla.
Asimismo, impacta gravemente a personas con discapacidad visual que dependen de lectores de pantalla, ya que si el foco no entra de forma secuencial en los elementos dinámicos o se reinicia al cerrar un menú, pierden el hilo de la navegación y perciben el contenido como desordenado o inaccesible.
Para las personas sordociegas, que navegan principalmente mediante líneas Braille, genera una desorientación absoluta y aislamiento informativo. Al no percibir visualmente la pantalla, dependen de que el foco siga un orden lineal estricto; si este salta erráticamente, la línea Braille muestra de repente un texto sin relación alguna, lo que para el usuario equivale a ser "teletransportado" a otra parte de la web sin previo aviso ni contexto.
En resumen, este tipo de errores crea una barrera de exclusión que impide a estos colectivos interactuar con la web de manera autónoma y eficiente y convierte cualquier trámite digital en una tarea extenuante.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://consejodetransparencia.es/
2.2.2 Código HTML:
<button id="openMenu">Menú</button>
<nav id="menu" hidden aria-hidden="true">
<a href="#a">Opción A</a>
<a href="#b">Opción B</a>
</nav>
<script>
const btn = document.getElementById('openMenu');
const menu = document.getElementById('menu');
btn.addEventListener('click', () => {
menu.hidden = false;
menu.setAttribute('aria-hidden','false');
menu.querySelector('a').focus();
});
</script>
Explicación de la solución aplicada:
En el ejemplo que vemos en la imagen podemos aparece un desplegable de la página web de ejemplo en el que hay varias opciones. A ese apartado se puede acceder navegando por teclado sin problema y además en el apartado solo puedes navegar por las opciones, sin salirse en ningún momento la navegación del subapartado.
