Updating Interfaces Accessibly

Dynamic interfaces must communicate changes without removing keyboard access or context.

Status message

<p id="save-status" role="status" aria-live="polite"></p>

const status = document.querySelector("#save-status");
status.textContent = "Changes saved.";

Use role="alert" for urgent errors, not routine success messages.

Toggle a region

<button id="details-button" aria-expanded="false"
        aria-controls="details-panel">Show details</button>
<section id="details-panel" hidden>...</section>

const button = document.querySelector("#details-button");
const panel = document.querySelector("#details-panel");

button.addEventListener("click", () => {
  const opening = panel.hidden;
  panel.hidden = !opening;
  button.setAttribute("aria-expanded", String(opening));
  button.textContent = opening ? "Hide details" : "Show details";
});

Check

• Native controls are used.
• State is conveyed programmatically and visibly.
• Focus is not unexpectedly moved.
• Interface works with keyboard input.
• Essential content is not available only through animation or colour.