An accessible toggle button
A button that switches on and off must say so to screen readers too, not just with colour.
The #mute button in the preview silences notifications. Make it a toggle: each click switches aria-pressed between "false" and "true" and its text between Mute and Unmute.
Start with aria-pressed="false". Keep it a <button> (it already is): that way the keyboard (Enter and Space) works with no extra code.
Challenges 0/3
- Starts with aria-pressed="false"
- One click switches it on and changes the label
- A second click returns it to the start
const btn = document.getElementById('mute');
btn.addEventListener('click', () => {
// toggle aria-pressed and the label
});Console output appears here (console.log).
Go deeper: the W3C WAI reference →
This in production, with your data? Let's talk for 15 minutes →