accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Status messages

On this page:


Summary

Make sure status messages are identified in code, so that assistive technologies can convey them to users.

Requirements

There are different situations where a status message need to be shown in a way that screen readers understand. For example:

These messages need to be conveyed to users without disturbing the user’s position on a page.

Screen reader announcements (using ARIA Live regions for the Web, for example) should be used to inform screen reader users of these events without disrupting their position on the page.

Why?

Official wording in the Web Content Accessibility Guidelines

4.1.3 Status Messages: In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. (Level AA)

See the W3C’s detailed explanation of this guideline with techniques and examples.


Guidance for Design

This section needs more content. Contribute via Github or email.


Guidance for iOS

This section needs more content. Contribute via Github or email.


Guidance for Android

This section needs more content. Contribute via Github or email.


Guidance for Flutter

Widgets with built in error messages such as TextField() in a Form() widget have their errors read out automatically when the validator: (value) {} returns a error string.

The same can be said for the AlertDialog widget.


Guidance for Web

The following are different situations you will need to cover:

When a status message tells the user something is successful

When a status message tells the user something is successful or is the results of an action. This can also be used for a state change when part of a page updates:

You can use these following techniques:

Use the ARIA role=”status” to present status messages in combination with the technique Providing success feedback when data is submitted successfully.

If a status message conveys a suggestion, or a warning or error:

NOTE: There may be times when the best user experience is to move focus to a message, such as an error, as a part of form validation etc. See the GDS’ Error Summary component and guidance for an example.

Use the following techniques:

Use ARIA role=”alert” or Live Regions to Identify Errors in combination with any of the following:

If a status message conveys information on the progress of a process:

The ARIA role="progressbar" can be used but may not be enough on its own (depending on support by browsers and assistive technologies). For some examples of progressbar role see:

You can use the following techniques:

Common mistakes

More guidance for Web


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email