2.22 Required fields not announced as such to screen reader users (H)
FIGURE 2.51: Required fields highlighted on the Basic Information page Enrolment page
FIGURE 2.52: mandatory fields marked as asterisk text highlighted on the Patient Settings Profile page
FIGURE 2.53: Required fields highlighted on the Manage Users page
FIGURE 2.54: Required fields highlighted on the My Profile modal within Settings
2.22.1 WCAG 1.3.1 (A), 3.3.2 (A) - Desktop
On multiple pages throughout the journey, required fields are marked with an asterisk and are sometimes highlighted with a message stating “Required Field” underneath the form field. However, this information is not conveyed to screen reader users.
Information that is presented visually needs to be programmatically conveyed to screen readers so that users with vision impairments also have access to this information. Here, screen reader users are not told which fields are compulsory and which are optional. This can negatively impact how their use of the system.
On the Patient Settings Profile page, this instruction is provided to users with the message ’Mandatory fields are marked in *’ and this is announced by screen readers as “mandatory fields are marked in star.” This could be clearer by using the word asterisk in the text as well as using the asterisk symbol.
2.22.2 Recommendation
- Use the
requiredattribute for<input>elements to inform screen reader users that a field is mandatory - Reword the message to "Mandatory fields are marked with an asterisk (*)"
2.22.3 Spot check: December 2022
This issue is unresolved. Please refer to the recommendation above to fix the issue.