Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance checkbox & radio button accessibility: label should come *after* input control #614

Open
jhp0621 opened this issue Sep 25, 2023 · 0 comments
Assignees
Labels
a11y Accessibility

Comments

@jhp0621
Copy link
Contributor

jhp0621 commented Sep 25, 2023

Feature Description

The label text is currently located before its corresponding checkbox/ radio button element.

Suggested Solution

LabeledField (which renders LabelComponent first then children) is used in many components including Checkbox and RadioButton.
We should look into creating a custom component for checkboxes and radio buttons so the input control is placed before the label text. (It would also make styling custom checkboxes/radio buttons easier)

Alternatives Considered / Existing Workarounds

Additional Context

Level Access Accessibility Checker scan result
Source: https://www.w3.org/TR/WCAG20-TECHS/H44.html

Note that the label is positioned after input elements of type="checkbox" and type="radio".

@jhp0621 jhp0621 added enhancement a11y Accessibility and removed enhancement labels Sep 25, 2023
@Ramy-Huffman-LPL Ramy-Huffman-LPL self-assigned this Mar 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility
Projects
None yet
Development

No branches or pull requests

2 participants