Skip to content

fix: improve form accessibility by associating labels with inputs - #96335

Open
niketchandivade wants to merge 1 commit into
vercel:canaryfrom
niketchandivade:fix/form-label-accessibility
Open

fix: improve form accessibility by associating labels with inputs#96335
niketchandivade wants to merge 1 commit into
vercel:canaryfrom
niketchandivade:fix/form-label-accessibility

Conversation

@niketchandivade

Copy link
Copy Markdown
Contributor

Summary

This PR improves the accessibility of the with-apivideo-upload example by associating form labels with their corresponding form controls using the htmlFor attribute.

Changes

  • Added htmlFor="link" to the "Play button color" label.
  • Added htmlFor="linkHover" to the "Buttons hover color" label.
  • Added an id to the "Hide controls" checkbox and associated its label using htmlFor.

Why

Associating labels with their corresponding form controls improves accessibility by:

  • Allowing screen readers to correctly announce form labels.
  • Enabling users to focus or toggle controls by clicking their labels.
  • Following HTML and WCAG best practices for accessible forms.

Before

  • Labels were visually displayed but were not programmatically associated with their respective inputs.

After

  • Each label is associated with its corresponding form control via htmlFor and id, improving accessibility without changing functionality.

Testing

  • Verified that clicking each label focuses or toggles the associated control.
  • No visual changes.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant