2526UPSA4.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_4/4.1_Compatible/4.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 onclick="toggleMenu()" class="menu-button">
☰
</div>
<script>
function toggleMenu() {
alert("Menú abierto");
}
</script>
Explicación del problema detectado:
Las tecnologías de apoyo no pueden identificar que se trata de un botón ni conocer su función, incumpliendo el criterio 4.1.2-A.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con discapacidad visual total que utilizan lectores de pantalla no reciben información sobre la función del control ni pueden interactuar con él de forma adecuada.
El componente resulta invisible desde el punto de vista de la accesibilidad, generando una barrera grave para la interacció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:
<button
id="menuBtn"
aria-expanded="false"
aria-controls="menu"
>
Menú
</button>
<nav id="menu" hidden>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<script>
const btn = document.getElementById("menuBtn");
const menu = document.getElementById("menu");
btn.addEventListener("click", () => {
const expanded = btn.getAttribute("aria-expanded") === "true";
btn.setAttribute("aria-expanded", String(!expanded));
menu.hidden = expanded;
});
</script>
Explicación de la solución aplicada:
En este ejemplo se utiliza un control nativo <button>, que expone automáticamente su rol y permite la interacción mediante teclado.
El botón tiene un nombre accesible visible (“Menú”) y comunica su estado mediante el atributo aria-expanded, que se actualiza dinámicamente.
De este modo, los lectores de pantalla pueden anunciar correctamente el nombre, la función y el estado del componente, cumpliendo el criterio 4.1.2-A.
