2.20 Form fields not associated to the question (H)
FIGURE 2.44: Select HCP Approver dropdown highlighted on the Profile Patient Settings page
FIGURE 2.45: Latest Blood Pressure and pregnancy questions and radio buttons highlighted on the Basic Health Information Patient Settings page
FIGURE 2.46: Radio buttons and information links highlighted on the Medical History Patient Settings page
FIGURE 2.47: Sex radio buttons highlighted on the Basic Information enrolment page
FIGURE 2.48: Access role radio buttons highlighted on the Manage Users page
2.20.1 WCAG 1.3.1 (A) - Desktop
On multiple forms throughout the journey, the form fields are not programmatically associated with the question. Screen readers announce the options within the form, but not the label of the input.
For instance on the Basic Health Information Patient Settings page:
Screen reader users are told the input type (radio) and the input options (Home/APBM or clinic) but they are not informed that this is for selecting where they want to take blood pressure measurements.
The “Mark the ones that apply to the patient’s pregnancy status” is not associated to the radio buttons: only the options (Pregnant/Considering/Breastfeeding) are announced by screen readers.
This persists on other pages, with labels being presented only visually to sighted users. This can be frustrating for users relying on a screen reader to interact with the website since they are not given any information on what they are selecting and why.
2.20.2 Recommendation
Ensure that the visual experience matches the programmatic experience.
Programmatically associate the label with the input fields using the ‘for’ and ‘id’ attributes. This will enable screen readers to understand what the form field relates to.
In addition to this, group the form fields such as the ‘Home/ABPM’ and ‘Clinic’ radio buttons to the question- ‘Blood pressure measurements from ABPM, home or clinic?’ by implementing a fieldset and descriptive legend. This helps users understand why certain form fields have been grouped together and will help them work through the form more easily.
To programmatically associate the ‘More information’ buttons on the Medical History Patient Settings page to the relevant medical condition, use aria-labelledby as this identifies the element that labels the element it is applied to.
2.20.3 Resources
Web Accessibility Initiative’s guide on programmatically associating labels with form fields
2.20.4 Spot check: December 2022
This issue is unresolved. Please refer to the recommendation above to fix the issue.