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.
