WCAG 4.1.3 AA: Success message not announced by screen readers (Issue 37)

[CJE001]

Summary

Via Vision Australia assessment: August 2024

Impact: medium

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au

Steps to reproduce

digital.gov.au beta | digital.gov.au (https://www.digital.gov.au/?token=HbBWNY8yvkLH2pbjghtlW7jbmOxmY1A6zfdp__IKckI)

Contact digital.gov.au beta | digital.gov.au (https://www.digital.gov.au/contact)

Observed outcome

When a user submits the contact form successfully, they are redirected from the "Contact" page to the home page, and a success message, "Your message has been sent was submitted" is displayed below the banner. This message is not announced by screen readers.

<div class="ct-message ct-theme-light ct-message--information " role="contentinfo" aria-label="information">
<div class="ct-message__icon">
<svg class="ct-icon ct-icon--size-regular " aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>
<div class="ct-message__content">
<div class="ct-message__title">
Your message has been sent.
</div>
</div>
</div>

Why this matters

When a new page is loaded, screen readers will typically announce the page title and then work down the page content. As a redirect to the home page is likely to be unexpected, screen reader users may not reach the success message, and struggle to understand the result of submitting the form or why they have been redirected.
Additionally, many users may struggle to understand their place within the site when an unexpected redirect occurs.

Expected outcome

When the form is successfully submitted, reload the same page and display the success status message.

The message should be in a live region so that it is announced by screen readers when the page loads:

• Add the aria-live="assertive" attribute to the < div > element that contains the status message.
• This region must be in the DOM on page load.

Code example

<div class="ct-message ct-theme-light ct-message--information " role="contentinfo" aria-label="information" aria-live="assertive">
<div class="ct-message__icon">
<svg class="ct-icon ct-icon--size-regular " aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
</div>
<div class="ct-message__content">
<div class="ct-message__title">
Your message has been sent.
</div>
</div>
</div>

Related issues

For other issues related to this component, please refer to:

• Issue 6 – Label not programmatically associated with input
• Issue 7 – Error messages not programmatically associated with input
• Issue 12 – Inputs missing autocomplete attribute
• Issue 20 – Form input borders have insufficient contrast
• Issue 32 – Required fields not indicated

Additional example

Tell us what you think about digital.gov.au Beta | digital.gov.au (https://www.digital.gov.au/tell-us-what-you-think-about-digitalgovau-beta-0)

Description

When a user successfully submits the feedback from, the page is reloaded with a success message. This message is not announced by screen readers.

Recommendation

Please refer to the recommendation in the primary example to include the status message in a live region.

[CJE001]

4.1.3 Status Messages: WCAG 2.1 Level AA

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.

Users who are blind or have low vision and who use screen readers may not be aware of important changes in content that are not given focus, without being unnecessarily interrupted in their work. Therefore it is important to provide appropriate roles or properties to status messages, allowing the new content to be spoken by screen readers in a way that is not intrusive to the user.