URL: /search/
Criterion: Status Messages 4.1.3 (AA)
When talking about web applications, we are usually talking about dynamically updating pages. In these cases, we have to be aware that some users are not in a position to perceive the changes that occurred in a different part of the page. Sometimes, these changes can be quite important.
Search page is a good example of that. When a user types into a search field, and there are no results, it is quite inconvenient to navigate away from the search field over to the “No results” note, and then back to field to correct the error. For some users this can be quite a road trip.
To solve this issue, the SC 4.1.3 requires us to create markup that allows screen readers and other accessibility software to detect important changes (statuses) and announce them immediately.
Normally, we use the so-called live regions for this. When the content within a live region is updated, screen readers will (usually, but no always!) announce this change to the user.
There’s a two caveats, though.
-
The live region element must have been in the page before the content is updated. Suddenly popping the live region itself into the page will not work in some screen readers.
-
There should be a small delay before the action that triggers the change and the update of the region contents. If the content updates too soon, the change is not announced.
On the search page I intend to wrap all the messages in a single live region (<div aria-live="polite"></div>) that will always be in the page, and updated when there are messages. Since this is part of a React app, I will also need to figure out something to delay the message. I’ve some ideas but nothing that clicks yet.