16.3 Form fields are not programmatically associated (H)

FIGURE 16.3: radio buttons on the Registration form page

16.3.1 WCAG 1.3.1 (A), 4.1.1 (A) - Desktop

The ‘Yes’ and ‘No radio buttons are not programmatically associated with the labels and the two radio buttons are not associated with the questions (’SMS required?’ and the ‘Additional support required?’) on the ‘Registration form’ page. Therefore, screen reader users who navigate by form controls for ease and efficiency will land on these controls with no understanding of what input is required.

This issue persists across all form fields on the Registration page.

This visual association needs to be available programmatically for screen reader users who navigate the site by interactive elements (for ease and efficiency) so they can understand the broader context of the process and the relationship between form controls and associated labels. Finally, these appear to have been coded as checkboxes when they behave like radio buttons.

16.3.2 Recommendation

Programmatically associate the label with the input fields using the ‘for’ and ‘id’ attributes. This will enable screenreaders to understand what the radio button relates to.

In addition to this, group the ‘Yes’ and ‘No’ form fields to the question 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.

Finally implement these controls as a radio button.

For guidance please refer to the Government Design System (GDS) design pattern on fieldsets

More information on accessible form fields

---