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.
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?
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.