Agent WranglersAXS-30Required
Announce changes without moving focus
Announce changes such as "Copied" or "3 results" through a live region that is already in the page, without moving focus. This is WCAG criterion 4.1.3 (AA).
How to do it
Put an empty <p role="status"> in the first HTML. Write the message into it when something happens. Use role="alert" only for urgent errors. See also use toasts only to confirm finished work.
Examples
HTML example
<button type="button" id="copy">Copy</button>
<p role="status" id="status"></p>
<script>
document.getElementById('copy').addEventListener('click', async () => {
await navigator.clipboard.writeText('hello@example.com');
document.getElementById('status').textContent = 'Copied';
});
</script>How to check
A browser test triggers each action. The live region was in the initial HTML, now holds the message, and document.activeElement did not change.
Sources
Related rules
- AIF-46 Make streamed answers work with a screen reader in AI features
- APP-21 Save drafts on their own in Web app interface
- APP-23 Build search-as-you-type fields as a combobox in Web app interface
- APP-36 Make sortable columns buttons in Web app interface
- APP-40 Use toasts only to confirm finished work in Web app interface
- NTF-34 Announce new items without stealing focus in Notifications
- AXS-51 Announce changes on native screens in Accessibility
For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/accessibility/forms-changes-and-time/status-messages">Agent Wranglers accessibility playbook</a>. In code you write, add a comment next to it with the same link.