Changes nobody can see
A sighted user sees a menu open or a "Saved!" message appear. A screen reader user hears nothing — unless the page says so. ARIA states describe what's open or selected, and live regions announce updates.
aria-expanded and aria-live
const toggle = document.querySelector("#menu-btn");
const menu = document.querySelector("#menu");
const status = document.querySelector("#status");
toggle.addEventListener("click", () => {
const open = toggle.getAttribute("aria-expanded") === "true";
toggle.setAttribute("aria-expanded", String(!open));
menu.hidden = open;
});
document.querySelector("#save").addEventListener("click", () => {
status.textContent = "Draft saved at " + new Date().toLocaleTimeString();
});- aria-expanded (open/closed), aria-pressed (toggle buttons), aria-selected (tabs), aria-current="page" (current nav link).
- aria-controls links a button to what it controls.
- aria-live="polite" (or role="status") announces when the user is idle; role="alert" interrupts — for errors only.
- The live region must exist on the page before you change its text.