The ARIA Status Role
Status messages allow screen readers and other assistive technology to tell users that content has changed on the page without interrupting what the user is doing by changing element has focused. 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 makes the example accessible.