using the `aria-expanded` attribute as shown in our example, even though it was not supported in radios and checkboxes.We saw that many conditional reveals were: When unpacking the issue presented to us by the GOV.UK accessibility team, we identified that there were in fact 4 areas to investigate. The `aria-expanded` attribute indicates whether the component has a ‘collapsed’ or ‘expanded’ state to tell the user if there’s new information they need to look at.Įarly on, we realised that our use of `aria-expanded` in conditional reveals was not supported for the role of a radio button or checkbox in the ARIA specification.

To notify users with assistive technology, similar components (such as accordions or dropdown navigation bars) use ARIA (Accessible Rich Internet Applications) attributes. To meet accessibility requirements, we added this issue to our accessibility statement and started investigating solutions.Īlong the way, we’ve learned more about the problem, what causes it and have worked to make conditional reveals work better for users. This would fail WCAG 2.1 success criterion 4.1.2: Name, Role, Value which requires the user be notified of any changes in user interface components. They discovered that users are not always notified when new information, such as a follow-up question, is conditionally revealed, particularly for screen reader users.

In September 2020, the GOV.UK accessibility team found an accessibility issue with conditional reveals. They’re often used by service teams to group related questions together, by revealing follow-up questions only when they’re relevant to the user.

In the radio button and the checkbox components, we offer an option to conditionally reveal fields when the user selects an answer. The GOV.UK Design System is a library of styles, components and patterns to help teams in the public sector quickly design and build usable, accessible digital services.

Checkbox accessibility screen reader