question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Checkboxes and radios that conditionally reveal content use aria-expanded which is not a valid aria-attribute for those roles

See original GitHub issue

Originally 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.

@36degrees:

(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:open
  • Created 5 years ago
  • Comments:12 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
NickColleycommented, Sep 11, 2019

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:

  • not remove these aria attributes, pending more feedback from user research
  • document this as a known issue
  • consider approaching the ARIA working group to suggest broadening the scope of aria-expanded.
0reactions
domoscargincommented, Jun 30, 2022

Update: the ARIA proposal milestone has been moved to ARIA 1.4: https://github.com/w3c/aria/issues/1404#issuecomment-1151969396

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found