158

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?

dakab
  • 5,379
  • 9
  • 43
  • 67
aslum
  • 11,774
  • 16
  • 49
  • 70
  • 1
    Is this a general UI design/usability question? – jball May 13 '10 at 20:27
  • 1
    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 May 13 '10 at 20:30
  • I'm adding the [html] tag since your comment on one of the answers below implies that is the context you're curious about. I'm still unsure about whether you're asking a technical or design question. – jball May 13 '10 at 20:46
  • 1
    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](https://www.w3.org/TR/html4/interact/forms.html#edef-LABEL) calls this implicit association. – rybo111 Aug 25 '16 at 11:10
  • 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 May 13 '10 at 20:16
  • 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 May 13 '10 at 20:16

3 Answers3

195

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.

James Sumners
  • 14,485
  • 10
  • 59
  • 77
  • 3
    It's really more of a usability/accessibility question then the HTML. The html works. – aslum May 13 '10 at 20:35
  • 3
    We should all use only valid code, otherwise things might break in the future or for somebody else or with some JS library or whatever. – SHernandez Aug 17 '14 at 12:36
  • 2
    The correct answer is Rob's. This solution works for sighted users and fails in some screen readers. Aslum, guessing you accepted jsummers's answer above prior to Rob submitting his answer. – cage rattler Jun 05 '15 at 17:29
  • 3
    @AvramLavinsky no, this is the correct answer to "can a field have two labels?" The spec is pretty clear. How clients choose to interpret that is up to them. Your link to the "aria-describedby", which links to "aria-labeledby", is the way to "fix" broken screen readers. – James Sumners Jun 05 '15 at 18:02
  • Funny MDN says "One input can be associated with multiple labels." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label – 2540625 Dec 06 '19 at 23:02
  • I believe you will fail an WCAG compliance test if using more than a single label per input. Lighthouse flags form elements that have more than one label. More info here: https://web.dev/form-field-multiple-labels/ – James Moberg Feb 01 '21 at 19:32
51

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

Rob Whelan
  • 1,281
  • 13
  • 15
  • 4
    This is correct, and the correct way to code this is via the [aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) – cage rattler Jun 05 '15 at 17:42
29

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.

Gert Grenander
  • 16,866
  • 6
  • 40
  • 43
  • 13
    +1 for the link to the doc where it clearly states that "More than one `LABEL` may be associated with the same control by creating multiple references via the `for` attribute." – alexg Aug 01 '13 at 08:49