Checkboxes and radios that conditionally reveal content use aria-expanded which is not a valid aria-attribute for those roles
See original GitHub issueOriginally raised by @injms on alphagov/govuk-design-system
The aXe accessiblity tool flags two issues when using the conditional reveal radio component. Running aXe on the example page shows the following issues:
Elements must only use allowed ARIA attributes
<input class="govuk-radios__input" id="how-contacted-conditional-1" name="how-contacted" type="radio" value="email" aria-controls="conditional-how-contacted-conditional-1" aria-expanded="false">
To solve this violation, you need to:
Fix the following:
- ARIA attribute is not allowed: aria-expanded=“false”
I think the expected behaviour would be to have no critical issues flagged by aXe - unless this is a false alarm or is found not to have any impact after testing in the empathy lab.
(For context, this is something that’s come up before in alphagov/govuk_elements#455, but we don’t currently have it recorded on the Frontend repo)
edit: Split https://github.com/alphagov/govuk-frontend/issues/1591 into a separate issue
Issue Analytics
- State:
- Created 5 years ago
- Comments:12 (8 by maintainers)
Top Results From Across the Web
Using the WAI-ARIA aria-expanded state to mark expandable ...
As an example, when subtrees of a tree can be expanded and collapsed dynamically, the aria-expanded state indicates whether the subtree can be...
Read more >If HTML and ARIA don't allow it, it's probably a bad idea
Invalid use of ARIA. More fundamentally, the GOV.UK radio group with conditionally revealed questions contains invalid ARIA. The email radio ...
Read more >Accessible Rich Internet Applications (WAI-ARIA) 1.3
Declaration of these roles on elements within dynamic web content is ... includes a WAI-ARIA attribute (e.g., input[aria-invalid="true"] ) ...
Read more >Represent State with HTML Attributes, Not Class Names
Instead, we should try to first communicate this state through the appropriate HTML attributes and then use CSS attribute selectors to style ...
Read more >ARIA: checkbox role - Accessibility - MDN Web Docs - Mozilla
The checkbox role is for checkable interactive controls. Elements containing role="checkbox" must also include the aria-checked attribute to ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The Design System team met and discussed these findings.
This pattern has been through a lot of user research by different service teams and we have not had any feedback to suggest that this is not working for real users of assistive technologies.
We will ask the community for more research with real users of assistive technologies to understand if there are any barriers.
We know that users of the screen reader JAWs and VoiceOver on Mac (Checkboxes only) are not helped by
aria-expanded
, so based on the feedback we get from the community we can try to understand if removing these attributes entirely will cause barriers.This means we will:
aria-expanded
.Update: the ARIA proposal milestone has been moved to ARIA 1.4: https://github.com/w3c/aria/issues/1404#issuecomment-1151969396