Description
Add a new sample demonstrating the correct use of id
on <input>
matching the for
attribute in <label>
.
Current Input Group samples use a <label for="...">
but the corresponding <input>
does not have an id
, only a name
. This breaks screen reader behavior, since for
must point to a matching id
, not name
.
This causes labels to go unannounced in screen readers like JAWS and NVDA, and fails HTML validation checks.
Why Needed
- Proper
for
and id
pairing is required for screen readers to associate labels with inputs.
- Missing
id
causes major accessibility issues and leads to confusion for users with assistive tech.
- HTML validators will raise warnings or errors.
Recommendations
- Include documentation explaining.