The catalog starts with six sessions; Writing has two. Searching all categories for chart yields one, while gardening yields zero and a clear-filter action. The working example updates a polite atomic live region with the count; the card list remains outside it.
Work through the example
Select Writing and read “2 sessions match Writing.” The list contains Clear email and Better summaries. Clear filters, enter chart and Apply search to see Chart labels alone. Search input also applies after a 300-millisecond pause. No action moves focus to the results, and zero matches leave the search and clear action available.
Create the empty live region in the initial document and retain a separate visible initial count. Update the short sentence only after filtering. Keep card details outside the announcement so the reader can explore them deliberately. The markup expresses announcement intent; verify actual speech, interruption and focus with the browser and assistive technology your audience uses.
Give the result a specific sentence
Use this fictional staff workshop schedule. Each session lasts 45 minutes; the category filter changes which sessions appear, not their duration or availability.
| Session | Category | Start |
|---|---|---|
| Clear email | Writing | 9:00 AM |
| Better summaries | Writing | 10:00 AM |
| Spreadsheet cleanup | Data | 9:00 AM |
| Chart labels | Data | 11:00 AM |
| Slide structure | Presenting | 10:00 AM |
| Practice introductions | Presenting | 1:00 PM |
All shows six sessions. Writing, Data, and Presenting each show two. A text search for "chart" shows one, and "gardening" shows none. The empty result needs a visible sentence and a Clear filters button, so there is a useful action after zero matches.
Keep the count beside the filter controls. The message should describe the current selection even if the reader cannot see which chip is colored. "2 sessions match Data" carries more information than "Updated."
Create the region before its first update
Put an empty paragraph with aria-live="polite" and aria-atomic="true" in the initial HTML. Change its text after an actual filtering action. The polite priority lets assistive technology present the update at a suitable pause; it does not ask the browser to move keyboard focus.
Use a separate visible initial count of six if you want the catalog to announce nothing on load. Keep that initial count outside the live region, then hide it when the first update supplies the replacement sentence. This avoids relying on newly inserted, already populated markup as the announcement mechanism.
The atomic setting asks for the whole status sentence when part of it changes. Without that intention, a reader could receive a fragment that lacks the category or unit. Keep the entire message short enough to hear comfortably.
Keep a changing catalog from becoming a stream of announcements
Do not put the entire card collection inside the live region. The person needs a result summary before deciding which card to read. Reserve assertive announcements for circumstances that justify interrupting the current speech; ordinary filtering does not need that priority.
Category selection can update immediately. For a search field, wait 300 milliseconds after the latest input before applying the filter and announcement together. Cancel the previous pending update when another character arrives. This delay is a design choice for this catalog, not a required ARIA timing value.
Leave focus in the search field after filtering. Moving it to the results after every letter would make continued typing awkward. A "Skip to sessions" link can offer a deliberate way to move onward.
Recreate this example
Build one self-contained responsive HTML example titled “aria-live: give filtered results one clear count” for readers completing the stated task. Return the complete HTML with embedded CSS and JavaScript. Use no remote fonts, libraries, images, requests, account connections, or saved-state claims.
Use six fictional 45-minute workshops: Clear email, Writing, 9 AM; Better summaries, Writing, 10 AM; Spreadsheet cleanup, Data, 9 AM; Chart labels, Data, 11 AM; Slide structure, Presenting, 10 AM; Practice introductions, Presenting, 1 PM. Provide All/Writing/Data/Presenting buttons and labeled title search. Categories apply immediately; search debounces 300 ms, cancels pending timers, and has Apply search. Initially show 6 outside an empty polite atomic live paragraph that remains rendered while empty. Updates describe count, category and query: Writing gives 2; All plus chart gives 1; gardening gives 0. Clear restores 6. Cards stay outside the live region; never move focus programmatically. Empty state suggests clearing filters.
Use a workshop catalog with category controls, short count status and readable session rows design with a compact header. Keep the actual sample data, controls, and useful default result visible early on a 360px-wide screen. Use readable text at least 16px, generous paragraph spacing, strong contrast, semantic labels, visible keyboard focus, and wrapping source blocks. Stack records on narrow screens rather than forcing a wide table.
Wire each action to an explicit type=button click handler using element selectors; the host permits scripts but blocks form submission. Update the visible result when the described action occurs. Show specific error feedback for invalid or missing input and clear stale feedback after dependent inputs change. Use plain text when displaying user values.
Visible filtering and ARIA markup do not prove screen-reader speech or a specific device/browser experience. Keep the source fixture and worked teacher or developer example distinct from actual user records. Include the domain-specific explanation and next check beside the result. Provide no fake download, send, deployment, approval, or persistence button. Everything operates locally for the current page session.
Review the prepared copy in NOS
Test the catalog’s count sentence with the intended browser and screen reader before accepting announcement behavior. If teammates review an HTML explanation in NOS, eligible static filter instructions can be revised visually. Keep actual speech and keyboard observations separate from the visible result-count checks.