2526UFV2.1.2-A-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.1_Teclado_Accesible/2.1.2-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 id="modal-oferta" class="modal-trap">
<div class="boton-falso-cerrar" onclick="cerrarModal()">X</div>
<h2>¡Oferta Especial!</h2>
<p>Suscríbete ahora.</p>
<input type="email" id="email" placeholder="Tu correo">
<button onclick="enviar()">Enviar</button>
</div>
Explicación del problema detectado:
El botón de cerrar es un elemento no interactivo (como un div o span) con un evento de clic de ratón, y no existe una escucha de eventos para el teclado.
El usuario que navega con teclado entra en el input. Pulsa Tab y va al botón Enviar. Pulsa Tab de nuevo esperando salir de la modal o ir al botón de cerrar, pero el ciclo le devuelve al input. Como el botón de cerrar es un div (no recibe foco) y la tecla Escape no está programada, el usuario está atrapado. Su única opción es cerrar el navegador entero.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con discapacidad motriz, Personas con ceguera total, Usuarios de navegacion de voz
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
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.2.2 Código HTML:
<div role="dialog" aria-modal="true" aria-labelledby="titulo-modal">
<button class="btn-cerrar" onclick="cerrarModal()" aria-label="Cerrar ventana">
X
</button>
<h2 id="titulo-modal">¡Oferta Especial!</h2>
<input type="email" id="email-acc" placeholder="Tu correo">
<button onclick="enviar()">Enviar</button>
</div>
Explicación de la solución aplicada:
El usuario puede moverse cíclicamente por la modal, pero siempre puede alcanzar el botón "Cerrar" mediante el tabulador y activarlo con Enter o Espacio. Además, como estándar de usabilidad y accesibilidad, se programa la tecla Escape (ESC) para cerrar la ventana inmediatamente, garantizando que nadie quede atrapado.
