Issue Summary

The error messages are not conveyed to screen reader users.

Test URLs

mycolorado-general-support

mycolorado-accessibility-support

Steps to Reproduce

1. Open the myColorado Support Request Form on iOS or Android devices.
2. Enable a screen reader (VoiceOver on iOS or TalkBack on Android).
3. Leave all form fields empty.
4. Navigate to and activate the "Send" button.
5. Observe that the focus moves to the "Privacy" link instead of the first field with an error.
6. Notice that while error messages are displayed below the respective form fields, they are not announced by the screen reader when navigating through the fields.

Screen Recording

Errors issue.mov

Actual Results

When users leave the form fields empty and activate the "Send" button, error messages are displayed below the respective form fields. However, these error messages are not announced by the screen reader when navigating through the fields.

This issue occurs because an identical value is used in the id attribute of the <p> elements containing the error messages, and the aria-describedby attribute of the form fields is not correctly referencing these IDs.

Additionally, the focus unexpectedly moves to the "Privacy" link elsewhere on the page instead of returning to the first field with an error.

As a result, screen reader users are unaware of the presence of errors, preventing them from understanding and correcting the input issues.

Expected Results

The user’s focus should move to the first field with an error, and the corresponding error messages should be correctly associated and announced by the screen reader.

Apply the following changes:

• Add a unique "id" attribute to each <p> element containing error messages.
• Add the "aria-describedby" attribute to each form field and reference the corresponding <p> element’s id.
• Ensure that each <p> element’s id is unique and correctly referenced by the form field’s aria-describedby.
• Set focus to the first field with an error using JavaScript’s .focus() method immediately upon form submission.

Code Snippet:

<label for="email">Email confirmation to</label>
<input id="email" type="text" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Please provide a value for the required field 'Email confirmation to'.</p>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

iPhone 15 Pro Max
iOS Version 26.0
Android Version 14
Chrome - Version 140.0.7339.207
Safari- Version 26
TalkBack
VoiceOver - Version Latest