Understand the idea

A filter can change ten cards into two while the cursor remains in its search field. Sighted readers may notice immediately; a screen-reader user needs that change expressed in a form their software can announce.

A status region is a place for advisory updates. The status role has an implicit polite live setting and atomic behaviour: assistive technology can announce an update when an appropriate pause is available. Actual announcement timing varies by software and context.

Read the example

A markup pattern for an existing filter. The complete recipe supplies the filtering, ordering and reset behaviour. Keep the initially empty status region in the DOM before updating it.

HTML · EXAMPLE
<label for="query">Find a project</label>
<input id="query" type="search">
<p id="count" role="status" aria-atomic="true"></p>
<!-- After filtering, JavaScript updates count.textContent.
     For example: "2 of 4 projects shown. Title A–Z." -->

Say what changed and what to do

“No matches” states the result; “Clear the filter or try another word” supplies a next step. A count with its total gives useful context. If the user changed sorting, include the new order rather than announcing a count that stayed the same.

Keep the announcement small

Do not make an entire changing page a live region. For a small local filter, update a compact count. If a faster or larger interaction becomes noisy, consider delaying the announcement until typing pauses while keeping the visual results responsive. Evaluate that timing with real users instead of assuming that a longer delay is always better.

Status, error and focus are different tools

A routine result count is advisory. An urgent interruption may justify an alert, but marking every update assertive competes with what someone is already hearing. Field errors need direct associations with their fields; a live message does not replace those labels and relationships.

Test beyond the markup

Verify the visible text first, then test with a screen reader. Check rapid typing, repeated results and reset. A role attribute alone does not prove that the complete interaction is understandable.

Explore the filtering and sorting recipe and compare it with the practice form. In each case, the feedback tells the truth about what happened locally.

A small mistake, explained

What goes wrong

Every character announces the entire result list, or a result update moves focus away from the field being edited.

How to fix it. Keep the result list outside the live region. Update a short summary and preserve focus in the active control. Avoid rewriting an unchanged message unnecessarily.

Try it yourself

Filter the card recipe to no matches and then reset it. Verify that a useful visible message accompanies each state and that you can keep typing without losing focus.

Further reading

MDN: The status role (new tab)

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.