Table of Contents
    Understanding WCAG Success Criterion status Messages (AA)

    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

    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 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:

    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 AT and browser support). For some examples of progressbar role see:

    You can use the following techniques:

    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.
    • Using role="alert" or 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.

    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”

    Related to 4.1.3 Status Message (AA)

    1.4.11 Non-Text Contrast(AA)

    Useful resources for 4.1.3 status Messages (AA)

    Leave a Reply

    Your email address will not be published. Required fields are marked *