Criterios de Robusto
RobustoPauta 4.1 Compatible
4.1.2Nombre, función, valor
Nivel ALo exige la normativa (EN 301 549).
Qué pide
Los componentes de interfaz exponen a la tecnología de apoyo su nombre, su rol y su estado.
A quién ayuda: Usuarios de lector de pantalla y control por voz.
Un caso real
Un acordeón hecho a medida en una página de preguntas frecuentes.
BienUsa un botón con aria-expanded="true/false" o el elemento details nativo.
MalUn div clicable que el lector anuncia como texto plano, sin estado.
Cómo aplicarlo en código
Estado expuesto a la tecnología de apoyo
El botón tiene rol, nombre y estado (aria-expanded). La opción más sencilla sigue siendo el elemento details, que lo hace todo solo.
<button type="button" aria-expanded="false" aria-controls="faq-envio">
¿Cuánto tarda el envío?
</button>
<div id="faq-envio" hidden>Entre 24 y 48 horas.</div>
<script>
const boton = document.querySelector("[aria-controls='faq-envio']");
const panel = document.getElementById("faq-envio");
boton.addEventListener("click", () => {
const abierto = boton.getAttribute("aria-expanded") === "true";
boton.setAttribute("aria-expanded", String(!abierto));
panel.hidden = abierto;
});
</script><div class="pregunta" onclick="this.nextElementSibling.classList.toggle('abierto')">
¿Cuánto tarda el envío?
</div>
<div class="respuesta">Entre 24 y 48 horas.</div>Cómo comprobarlo
Inspecciona cada componente personalizado en el árbol de accesibilidad.