Form Inputs must have associated labels

[garyb1]

Context

All form inputs must have an associated labels. Visible on the sign up form for new users.

Expected Behaviour

Programmatically associate labels with all form controls - Deque.

Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etcetera, is often apparent to sighted users, even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product.

When labels for form elements are absent, screen reader users do not know the input data expectations. Screen readers cannot programmatically determine information about input objects without an established label relationship (or redundant text serving as a label).

The absence of labels prevent fields from receiving focus when read by screen readers, and users with impaired motor control do not get the benefit of a larger clickable area for the control since clicking the label activates the control.

Current Behavior

What is the current behavior?

Clicking form labels does not focus on inputs.

Screenshots

Steps to reproduce

Please provide detailed steps for reproducing the issue

1. Inspect new user sign up form, and see form elements.
2. OR Inspect with most automated a11y checkers like pa11y, axe devtools, or arc toolkit.
3. OR Inspect with any screen reader.

Additional info

Provide any additional information here

[github-actions]

Hello @garyb1, thanks for opening your first issue! your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.

[garyb1]

Will create a PR to address this as soon as possible.