Accessibility improvement - use label elements to reference form inputs

[clarkus]

Is your feature request related to a problem?

We have a lot of forms in our product. Very few of them use label elements. This is a usability and an accessibility issue. A label acts as extra affordance for a form input, but also offers an easy way to focus the corresponding input.

Describe the solution you'd like

Instead of using divs, use a label element with a for attribute that references the corresponding form element. This is showing up all over the place in our product. Maybe it's a result of the framework we're using for some interface components, but this is something we should try to fix sooner than later. It will cause major usability problems for some users.

This is really basic best practice for implementing form elements. I think we should treat this as a higher priority side quest for an upcoming sprint.

Describe alternatives you've considered

• I don't think there's an alternative. We should do this.

Additional context

• https://www.w3.org/WAI/tutorials/forms/labels/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#accessibility_concerns

Thank you for your feature request – we love each and every one!

[posthog-bot]

This issue hasn't seen activity in two years! If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in two weeks.

[posthog-bot]

This issue was closed due to lack of activity. Feel free to reopen if it's still relevant.