The ARIA Status Role
Status messages allow screen readers and other assistive technology to tell users that content has changed on the page. It does this without interrupting what the user is doing by changing which interactive element has focus. A perfect example of this use-case is in a search component like in the example below.
Visually Hidden Status Message
This example is based on this wiktionary lookup gist by
Jakob Voß,
modified to add accessibility features, including a visually hidden status
message that will tell screen reader users
that content has changed on the page.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.