Skip to content

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

Description

@jhp0621

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

a11yAccessibility

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions