Devographics / Devographics/Monorepo
Survey: Interested / Not Interested radio buttons use invalid nesting
- Dominant language
- TypeScript
- Stars
- 178
- Forks
- 55
- Avg merge
- 1m
- Merged PRs (30d)
- 2
Description
This is the HTML for the pairs of "Interested" / "Not Interested" radio buttons that follow each response in the survey:
```html
```
This construct is the problem:
```html
[…]
```
This produces nested radio buttons. Not only is this an invalid HTML construct, it is also a WCAG SC 4.1.2 failure.
In action, the effects may seem to be more annoying than anything, but they can make it problematic for screen reader users to fill out this form (especially when paired with the other issues I filed). This video shows that the radio buttons are announced twice, though more accurately the radio button is announced and then its nested radio button is announced (one offers a count, the other does not). See them at 0:11 and 0:14.
https://github.com/Devographics/Monorepo/assets/1376607/58dedb70-bff5-4c9e-baa2-9e84c4f75b45
There are two distinct patterns for radio buttons on this very first page of the survey, one has this invalid nesting issue and the other has a different invalid nesting issue impacting group labels (https://github.com/Devographics/Monorepo/issues/307). Running an automated accessibility test (using axe) found 188 issues and could have caught these.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.