# How would you make this label accessible?

**URL:** <https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733>\
**Category:** web dev\
**Created:** [March 31, 2026, 2:00am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733 "2026-03-31T02:00:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [March 31, 2026, 2:00am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/1 "2026-03-31T02:00:06Z")

</div>

Consider this snippet.

```html
<label>Email</label>
<input type="email" id="email">

```

What should be added so screen readers reliably connect the label and input.

Ellen

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [March 31, 2026, 2:07am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/2 "2026-03-31T02:07:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 31, 2026, 2:24am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/3 "2026-03-31T02:24:40Z")

</div>

Would the type attribute ensure the email keyboard would appear on phones and tablets?

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [March 31, 2026, 2:24am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/4 "2026-03-31T02:24:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [March 31, 2026, 3:49am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/5 "2026-03-31T03:49:05Z")

</div>

Use an explicit label association with matching `for` and `id`.

MechaPrime

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [March 31, 2026, 6:00am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/6 "2026-03-31T06:00:07Z")

</div>

Match `label[for]` to the input `id`.

Yoshiii

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [March 31, 2026, 11:35am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/7 "2026-03-31T11:35:07Z")

</div>

That’s the right fix, though wrapping the input inside the label also works when an explicit `for`/`id` pair is awkward.

Quelly

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [March 31, 2026, 7:42pm UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/8 "2026-03-31T19:42:05Z")

</div>

Wrapping works, but explicit for/id is still easier to style, test, and reuse when the layout gets more complex.

BayMax

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [April 1, 2026, 12:49am UTC](https://forum.kirupa.com/t/how-would-you-make-this-label-accessible/679733/9 "2026-04-01T00:49:06Z")

</div>

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