Issue Summary

The error messages are not conveyed to screen reader users.

Steps to Reproduce

1. Open the “IT Platforms and Support” page.
2. Navigate to the main content.
3. Using a screen reader, submit the “IT Platforms and Support” form empty.
4. Observe that user's focus remains on the “Send” button and errors get dynamically added between the form fields.

Screen Recording

Screen Recording 2024-04-26 at 10.35.09 AM.mov

Actual Results

When users submit the "IT Platforms and Support" form with empty fields, a generic error message"This field is required." is dynamically displayed below the input fields in the main content area. However, the keyboard's focus remains on the "Send" button. As a result, screen reader users are unaware of the error message.

Expected Results

The visual errors must be correctly associated with the form fields.

Apply the following changes:

• Add "aria-describedby" attribute to the form field.
• Reference the id attribute value of the container used to display the error text as the value for "aria-describedby" attribute.
• Set focus on the first field with error using the JavaScript .focus() method as soon as the form is submitted.
• Additionally, ensure that descriptive and specific error messages are provided for fields with error, for e.g. “First Name is required", “Employee Status Type is required“ and so on.

Workaround

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

Environment

MacBook Pro (14-inch, 2021)
macOS Sonoma 14.4.1
Chrome - Version 123.0.6312.105 (Official Build) (arm64)
Firefox- Version 124.0.2(64-bit)
Safari- Version 17.4.1 (19618.1.15.11.14)
JAWS- Version 2022
NVDA- Version 2021.2
VoiceOver - Version Latest