WCAG 4.1.3: Status Messages

Let’s say for a moment that you are registering for something online, but when you get to the page asking for your personal information, you try to move ahead without entering anything (maybe you’re lazy, or perhaps you have a Ron-Swanson-like passion for privacy). Rather than advancing to the next screen, messages in red appear under the fields you left blank letting you know that the missing information is required.

[Source: ux.stackexchange.com]

Such indicators are clear enough for sighted users, but as content authors, you also need to ensure that the same information is accessible for those with low or no vision, who rely on assistive technologies like screen readers to operate the web.

Screen readers interpret the information on a web page through that site’s underlying code. Accordingly, for any content implemented with markup languages, it’s crucial that status messages can be determined programmatically through role or properties so that those using assistive technologies can be made aware of them without being interrupted.

Status Messages and Changes of Context

A status message, in this context, refers to information provided to the user about the results or ongoing progress of an application or process, including the existence of errors (as we saw in the previous section). Such messages, moreover, do not involve a change of context, since such changes, by their nature, interrupt the user by taking focus and so would already be picked up by a screen reader.

A change of context refers to a major shift in the content of a page. This can include changes to the user agent, viewport, or focus.

Here are some examples of status messages and changes of context, so we can try to get a better idea of what they are.

Status Messages

• Someone enters a term into a search engine, bringing them to a new page listing results. At the top of the page, there is a message reading, “1000 results found”. That line of text is a status message, since it describes the results of the search process and it does not interrupt the user by taking focus.
• After submitting a form online, text is added to the top of the page letting the user know that the form was submitted successfully.
• You try to add a photo to a shared album on your phone, and a snack bar, or brief message at the bottom of the app, informs the user that the process was unsuccessful.

[Source: https://material.io/design/components/snackbars.html#]

Changes of Context

• Someone enters an invalid password, and a dialog box appears informing the user as much. Since the dialog box takes the user’s focus, it counts as a change of context.
• A drop-down menu blocks some of the content on a page when it is accessed.
• Someone is filling out a customer feedback survey online, and when they indicate that they were not satisfied, an additional set of questions appear on the page asking the user to clarify.