CODEWITHSUNDEEP
htmlformsaccessibility
Chris Rockwell
Chris Rockwell

Reputation: 1842

Is having two labels for the same form control invalid or inaccessible HTML?

I am using a plugin to do client side form validation. The issue is that the plugin adds a label that contains the form information, so the invalid form control now has two labels. I have modified the plugin so that the labels toggle depending on the validity; however, I'm concerned about accessibility and valid HTML (although less concerned with the validation of HTML).

So, is this OK?

<label aria-hidden=true style="display:none" for="inputElement">My Input Element</label>
<label for="inputElement">My Input Element must be at least 10 characters</label>
<input id="inputElement">

I see in the specs that each label can only point to one input element, but it doesn't say if one input element can only have one label.

Thanks.

Upvotes: 1

Views: 1254

Answers (1)

Matthew Johnson
Matthew Johnson

Reputation: 5155

It is inaccessible to have multiple labels for a single input. It is confusing to people that use screen readers. With that said, anything with display:none; will not be seen with screen readers. If you're just toggling based on if the input is valid, use a div instead.

An answer to this question explains that is technically correct, but the second answer explains why you should not do it.

Upvotes: 1

Related Questions