2526UPSA2.4.11-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.4_Navegable/2.4.11-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:
<style>
.cookie-banner {
position: fixed;
bottom: 0;
width: 100%;
height: 120px;
background: #333;
color: white;
padding: 1rem;
z-index: 1000;
}
</style>
<a href="#contenido">Ir al contenido</a>
<div style="margin-top: 800px;">
<button>Enviar formulario</button>
</div>
<div class="cookie-banner">
<p>Usamos cookies</p>
</div>
Explicación del problema detectado:
Cuando el usuario navega con el teclado y el foco llega al botón “Enviar formulario”, este queda totalmente oculto por el banner fijo de cookies situado en la parte inferior de la pantalla.
No se proporciona ningún mecanismo para evitar que el contenido superpuesto tape el elemento enfocado, incumpliendo el criterio 2.4.11-A.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con discapacidad motriz que dependen del teclado pueden perder la referencia visual del foco y no saber qué elemento están activando.
Las personas con baja visión o que utilizan altos niveles de zoom pueden quedar bloqueadas, ya que el foco se sitúa en un elemento invisible, dificultando la continuidad de la navegación.
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:
<style>
.cookie-banner {
position: sticky;
bottom: 0;
background: #eee;
padding: 1rem;
}
button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
</style>
<a href="#contenido">Ir al contenido</a>
<div style="margin-top: 800px;">
<button>Enviar formulario</button>
</div>
<div class="cookie-banner" role="region" aria-label="Aviso de cookies">
<button>Aceptar cookies</button>
</div>
Explicación de la solución aplicada:
En este ejemplo, el banner de cookies no oculta los elementos que reciben el foco, ya que utiliza una posición sticky en lugar de un overlay fijo que tape el contenido.
Además, el foco es claramente visible gracias al uso de :focus-visible, permitiendo a los usuarios identificar en todo momento qué elemento está activo.
De este modo, el elemento enfocado permanece siempre visible y el criterio 2.4.11-A se cumple correctamente.
