Why should HTML elements (input, textarea, and select) have associated labels?

Question

Can anyone please shed light on why (input, textarea, and select) should have an associated label?

I found a stackoverflow thread (Should I put input elements inside a label element?) that explains all the ways of associating <input> and <label>, but I didn't find any clear explanations of WHY a label must be associated.

Example

WebStorm (IDE) generates a "Missing associated label" warning for the input in this code:

<div>
  <input type="text" id="search" name="search">
  <button id="logout" name="logout">Logout</button>
</div>

Applying auto-correction adds a label for the input:

<div>
  <label>
    <input type="text" id="search" name="search">
  </label>
  <button id="logout" name="logout">Logout</button>
</div>

The HTML works fine without the label, so why should I add it?

Note: it not necessarily to have `` around your ``. As long as it is associate with that input, e.g. `Length`. P.S. And of course, you can just disable that inspection if you do not like it or think that it's unnecessary in your case. — LazyOne, Jun 25 '20 at 09:19

score 5 · Accepted Answer · answered Jun 25 '20 at 06:18

5

Associated labels are meant for Acessibility. So when you run, for example, a lightouse Chrome check on a website it will point out missing labels in the "Acessibility" part of its report. Reason:

"Labels ensure that form controls are announced properly by assistive technologies, like screen readers".

So It is good to have them when you have a website that could be acessed by someone with a disability who cant properly read or see the content himself and needs a screen reader.

answered Jun 25 '20 at 06:18

Warden330

999
1
5
11

Interesting, I was not expecting that answer. I suppose programmatic screen readers can have a number of use cases, like search engine optimization. But wouldn't this open you up to bots? – DV82XL Jun 25 '20 at 21:31
1

Hmm i think it could maybe make a bots work slightly easier but an openly acessible Website should have additional protection against bots, like captcha and a block for proxy services or known hosting providers. So on a good website that souldn't create a safety problem. – Warden330 Jun 26 '20 at 05:39

score 0 · Answer 2 · answered Nov 17 '22 at 07:39

0

You can just add aria-label="" attribute to tag (input, textarea or select) if you want to hide this warning in IDE by JetBrains.

answered Nov 17 '22 at 07:39

ZxDx

51
1
4

Why should HTML elements (input, textarea, and select) have associated labels?

Example

2 Answers2