Can an input field have two labels?

HtmlFormsLabels

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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!).

Solution 3 - Html

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionaslumView Question on Stackoverflow
Solution 1 - HtmlJames SumnersView Answer on Stackoverflow
Solution 2 - HtmlRob WhelanView Answer on Stackoverflow
Solution 3 - HtmlGert GrenanderView Answer on Stackoverflow