1.6 Conditionally revealed fields not effectively announced by screen readers (Positive)

1.6.1 WCAG 4.1.2 (A) - Android

Throughout the journey, there are form fields that contain conditionally revealed inputs. For instance, on the ‘Tell Us About Your Client’s Dependants’ page, choosing ‘Yes’ reveals a secondary input that needs to be populated.

Visually, it is clear that when users select this the field expands, but this information is not communicated via all screen readers. This could be frustrating for blind and visually impaired users who are not made aware of the dynamic change that appears on screen, and might not realise that the secondary input is linked to the initial radio button.

While the radio input does implement an aria-expanded attribute to inform users that the field is expandable, this is only announced by MacOS and iOS devices (announced as “Yes collapsed”). Not only are Windows and Android users not informed of this expandable feature, automated accessibility checkers like Accessibility Insights flag the use of aria-expanded within an <input> tag as an invalid syntax.

By default, an <input> field cannot have an aria-expanded attribute. This is because the aria-expanded attribute is only valid for specific element types with roles that involve expansion and contraction, like menus, dialogs, and accordion panels. <input> elements without explicitly assigned roles typically have the default role of “textbox,” which is not included in the list of valid roles for aria-expanded.

Conditional field on the Tell Us About Your Clients Dependants page

FIGURE 1.7: Conditional field on the Tell Us About Your Clients Dependants page

Conditional fields on the Your Clients Other Income page

FIGURE 1.8: Conditional fields on the Your Clients Other Income page

1.6.2 Recommendation

We understand that the accessibility of conditionally revealed questions has been flagged by the GOV.UK Design System. We also believe that informing all users of the expanded and collapsed state would be beneficial, and recommend continuing to reach out to the ARIA working group to add support for this behaviour.

Meanwhile, we recommend adding a visually-hidden <span> element to the label that informs screen reader users of the secondary input, such as: <input id="child-dependants" type="radio" value="true"> <label for="other-income"> Yes <span class="visually-hidden"> If yes, enter number </span> </label>

1.6.3 Spot check: April 2024

This issue has been resolved. A visually hidden span is now used so that screen reader users are informed of the secondary input.

This has been changed from a ‘Low’ severity issue to a ‘Positive’ finding.