When an action finishes without changing the page or moving focus, a visual message may be missed by someone using a screen reader. A small status region lets assistive technology announce an update while the user stays where they are.

<p id="save-status" role="status"></p>
saveButton.addEventListener("click", async () => {
  await saveSettings();
  document.querySelector("#save-status").textContent = "Settings saved.";
});

Keep announcements useful

  • Use status for advisory updates that should not interrupt the current task.
  • Do not announce every keystroke or repeated progress event.
  • Keep visible text in sync with what assistive technology receives.

A status message is not a substitute for handling errors or explaining what the user can do next. Use an appropriate error pattern when an action fails.

Test with keyboard navigation and a screen reader. The update should be announced once without unexpectedly moving focus.