Devographics / Devographics/Monorepo

Survey: Interested / Not Interested radio buttons use invalid nesting

Open
#308 14 comments 2 reactions 0 assignees View on GitHub
a11y
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


Tell us more:




Interested




Not interested

```

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.