Un botón de alternar accesible
Un botón que se activa y desactiva tiene que decirlo también al lector de pantalla, no solo con color.
El botón #mute de la vista previa silencia las notificaciones. Haz que funcione como interruptor: al pulsarlo cambia aria-pressed entre "false" y "true" y su texto entre Mute y Unmute (la interfaz de ejemplo está en inglés).
Empieza con aria-pressed="false". Usa un <button> (ya lo es): así el teclado (Enter y Espacio) funciona sin código extra.
Retos 0/3
- Empieza con aria-pressed="false"
- Un clic lo activa y cambia el texto
- Un segundo clic lo devuelve al estado inicial
const btn = document.getElementById('mute');
btn.addEventListener('click', () => {
// alterna aria-pressed y el texto del botón
});La consola aparece aquí (console.log).
Para profundizar: la referencia de W3C WAI (en inglés) →
¿Esto en producción, con tus datos? Hablemos 15 minutos →