Issue Description

The error message present for “Summary” input field is not associated programmatically.

Steps to Reproduce

1. Open “ Raise request” page.
2. Navigate to “Common requests” link present under “Contact us about” heading text.
3. Navigate to “Get IT help link and activate it.
4. Navigate to “summary” input field and keep it blank.
5. Navigate to “Send” button and activate it.
6. Observe only color is used to distinguish the error message.

Actual Behavior

When user submits empty data for mentioned field and hit “Save” button, error message gets displayed just below “Summary” field which is not announced by screen reader software.

As a result screen reader users who are vision impaired, they will not receive any information that an error has been created, and what needs to be done to resolve the error.

(The error in the "Summary" form field is indicated by red text only, which may be difficult for colorblind users to identify. This lack of additional non-color indication can prevent them from recognizing the required fields.)

Expected Result

To make it easier for colorblind users to understand that an error has occurred, an additional method can be provided, such as using an image-icon (role="image") with an accessible name (aria-label="error"). This informative image can convey that an error has occurred.

The error message present for mentioned field should be associated with its input field programmatically. This will ensure that the error is announced to the screen reader users.

In addition, error messages must be communicated to the users of assistive technologies. In this scenario, when error message appears dynamically on the page, use an assertive live region to prompt assistive technologies to automatically identify it.