HTML status region: announce a changed result without stealing focus

Use it for a real task

A receipt search updates results after a request. Keep the status node in the document from the start, then update its text when the request succeeds or fails. The role tells compatible assistive technology that the new message matters without moving keyboard focus away from the search field. A static initial string alone is not a request result and should not pretend that a search ran.

<form action="/receipts/search" method="get">
  <label for="receipt-query">Find a receipt</label>
  <input id="receipt-query" name="query" type="search">
  <button type="submit">Search</button>
</form>
<p id="receipt-status" role="status"></p>

What the markup guarantees

The markup establishes a region; it does not fetch results or fill it. A working client must update the text, and a server-rendered search should include a visible result heading or summary after navigation.

Cost and limits

A single short region is cheap. Repeated rapid announcements can overwhelm users, so report meaningful outcomes instead of every network or keystroke event.

Common Mistakes

• Do not place a stale success message in an empty status node.
• Do not move focus for every minor result update.
• Do not rely on status text as the only visible result.

Connected lessons

• HTML labels: bind each control to a durable accessible name
• HTML focus order: use native controls and keep DOM order usable
• HTML hidden and inert: remove inactive content from interaction deliberately

Continue with the connected Web Development lesson: DOM events: enhance a working control without losing its baseline.