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.

Not found.

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.

☜ Scroll to read full source ☞