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
