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 usecase 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.

Example code explanation

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 ☞