Can an input field have two labels?

147
votes

Mary had a little form, and its fields where labeled just so.
Whenever an error crept in, confusion it would sow.

I've got a label for each input field... pretty standard affair. After validating the form, I'm displaying a helpful little paragraph at the top of the form detailing what information is missing or incorrect.

Can I have two labels for the same input field? One in the form proper, and one in the validation reminder text? Is there any reason I shouldn't do this?

3
htmlformslabels
Have your tried what happens? If it works I don't believe it would cause any damage to your form nor the page. And you'll get a plus because the use will be able to click on the validation error and get the focus on the correct field. – Felipe Cypriano
I didn't tried it, but I guess it'll be possible. But I don't recommend using it, because a label defines what the field is for, a error message doesn't. So I shouldn't use a label to validation warnings. – Guido Hendriks
Is this a general UI design/usability question? – jball
Yeah. It "works" ... but is there some reason this is bad design? I'm guessing it might be for accessibility reasons, but for a normal user I figure being able to click on the error message and be taken to the messed up field would make things easier... I just don't know if it will mess up "readers for visually impaired" or the like. – aslum
In some cases, it's easier to put your control and text inside one label. You can even omit the for and id attributes. The specification calls this implicit association. – rybo111

3 Answers

181
votes

I assume this question is about HTML forms. From the specification:

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

Thus, each form control can be referenced by multiple labels, but each label can only reference one control. So if it makes sense to have a second label for a control (and in the situation you describe, it does) feel free to add a second label.

45
votes

The HTML is legal, and it works (clicking on any of the labels will transfer focus to the field in question).

It's a little trickier to do right for accessibility reasons.

It's not a "common" approach, and because of that at least one common screen reader (I tested with NVDA) only reads the first label when you shift focus into the field -- it ignores any additional labels for the same field.

So if your error message is at the top of the page, a blind or low-vision user tabbing through the fields will hear just the error message when landing on the field in question, not the "real" label next to it.

Hence -- if you phrase the error message properly, that might be a good thing (certainly better than just highlight the non-validating field in red!).

28
votes

Yes, you can have multiple labels point at the same form control. This is perfectly legal:

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

This is just an example... normally you would wrap these lines with one label since they're close.