# Updating Interfaces Accessibly

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

## Status message

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

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

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

## Toggle a region

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

~~~js
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.