There are different situations where a status message needs to be shown in a way that assistive technologies understand. These messages need to be presented to the user without receiving focus themselves, or disturbing the user’s place in a page.
Why is this a problem?
- A sighted person can quickly see status messages on a page, and them go back to what they were doing or reading. Moving focus to a message can be disruptive for screen reader users, users of speech recognition software and keyboard only users.
- If focus is always moved to the message users with cognitive impairments may also be confused by unpredictable focus changes.
Accessibility Requirements for 4.1.3 status Messages (AA)
The following are different situations where you will need to cover:
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.
NOTE: There may be time when you do want to move focus to a message, such as an error, as a part of form validation etc.
Use the following techniques:
Use ARIA role=alert or Live Regions to Identify Errors in combination with any of the following:
- Providing text descriptions to identify required fields that were not completed
- Providing a text description when the user provides information that is not in the list of allowed values
- Providing a text description when user input falls outside the required format or values
- Creating a mechanism that allows users to jump to errors
- Providing suggested correction text
- Providing spell checking and suggestions for text input
role="progressbar" can be used but may not be enough on its own (depending on AT and browser support). For some examples of
progressbar role see:
You can use the following techniques:
- Using role=log to identify sequential information updates
- Using role=status to present status messages in combination with Providing help by an assistant in the Web page
Common mistakes for 4.1.3 status Messages (AA)
- Status messages are not to be shown in a way that the AT understands or receive focus.
aria-live="assertive"on content which is not important.
- On a page with ARIA live regions – if regions are hidden or not needed – always make sure to switch their active and inactive states accordingly.
Techniques for 4.1.3 status Messages (AA)
- Using aria role=”status” to provide success or other feedback
- ARIA19: using ARIA role=alert or Live Regions to Identify Errors
- Using aria role=”progressbar” to convey the progress of the process
Common Failure for 4.1.3 status Messages (AA)
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F103: Failure of Success Criterion 4.1.3 due to providing status messages that cannot be programmatically determined through role or properties
FAQs for Status Messages
What are the benefits for this Success criteria?
1.New content is announced to the screen reader users When appropriate roles or properties are assigned to status messages, in such a way as to assist blind and low vision users.
2.Assigning proper roles or properties to status messages provides possible future uses and personalize opportunities to assistive technologies for users with cognitive disabilities. assistive technologies for users with cognitive disabilities may achieve an alternative means of indicating (or even delaying or suppressing) status messages, as preferred by the user
What are few scenarios where this success criterion is met?
1.While entering the password at the password text area in the few signup forms, there is a visual indication how strong the password is screen reader announces weak/weaker/strong
2.After the incorrect form submission, there is a message on the screen like 5 errors are found. screen reader announces as “5 errors are found”
3.After the successful form submission, there is message on the screen like your form has been successfully submitted, will contact you soon. screen reader announces the same.
4.After adding the items to shopping cart by using add to cart button of the product in the eCommerce websites, cart count gets updated visually like 0 to 1, 1 to 2, and so on, screen reader announces as “item has been added to the cart and currently cart has 2 items”