Intermediate
Announce search results with a live region
This search shows Searching… and then N results, but the message only appears when there is one, so screen readers miss it.
Render a status element with role="status" from the very first render (empty at first). Put only the message in it: Searching… while waiting, then 1 result or N results (for example 2 results).
Keep the results list outside the status element.
What Check tests
- An empty
role="status"element exists before any search - It says
Searching…while waiting - It then says
2 results - It's the same element the whole time (not re-created)
- The results list is outside the status element
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.