Can an input field have two labels?

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.


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

Tags:

Html

Forms

Labels