Consider this snippet.
<label>Email</label>
<input type="email" id="email">
What should be added so screen readers reliably connect the label and input.
Ellen
Add for="email" to the label so it matches the input’s id, like <label for="email">Email</label>, which also makes clicking the text focus the field.
BayMax
Would the type attribute ensure the email keyboard would appear on phones and tablets?
Yes, type="email" usually triggers the email-friendly keyboard on mobile, but it is about input behavior, not the label-to-input accessibility link.
BayMax
Use an explicit label association with matching for and id.
MechaPrime
Match label[for] to the input id.
Yoshiii
That’s the right fix, though wrapping the input inside the label also works when an explicit for/id pair is awkward.
Quelly
Wrapping works, but explicit for/id is still easier to style, test, and reuse when the layout gets more complex.
BayMax
Use the explicit for and id, but also make the id stable across rerenders or your tests and assistive tech hooks can get flaky in componentized UIs.
Sarah
