1

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.

Chris Rockwell
  • 1,688
  • 2
  • 21
  • 36
  • possible duplicate of [can an input field have two labels?](http://stackoverflow.com/questions/2829936/can-an-input-field-have-two-labels) – Jukka K. Korpela Nov 21 '13 at 06:50

1 Answers1

1

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.

Community
  • 1
  • 1
Matthew Johnson
  • 4,875
  • 2
  • 38
  • 51
  • 1
    Thanks. Further down in that question there is a link to the spec that states [it is legal]( http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1) so I feel better knowing that. Regarding the accessibility issue in the second answer, I'm not concerned with the issues raised (especially since the answer also states that only the first label was read). I had already made the decision to inject the error label prior to the valid label, and the error label includes the field name (e.g. First name is required). Thanks for pointing me in the right direction. – Chris Rockwell Nov 21 '13 at 01:21
  • Look into aria-invalid and `role="alert"`. There's a nice example [here](http://www.punkchip.com/2010/12/aria-enhance-form-validation/) for accessible form validation. Otherwise, if the screen-reader user enters information into the text-box, and the alert is above it, they may never "see" the message. – Matthew Johnson Nov 21 '13 at 01:35
  • Chris, can you outline where you think it says it is legal? Explicitly, you have to use `for`/`id`, and all valid HTML allows the use of the same `id` once per page. Implicitly: "To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control." – Ryan B Nov 25 '13 at 22:09
  • On the [html4](http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL) specs it says `More than one LABEL may be associated with the same control by creating multiple references via the for attribute.` The [html5](http://www.w3.org/TR/html5/forms.html#the-label-element) specs simply states `If the attribute is specified, the attribute's value must be the ID of a labelable element in the same Document as the label element`, with no one-to-one relationship requirement. With that said, multiple `label` elements can get *very* confusing for screen-reader users. – Matthew Johnson Nov 25 '13 at 22:28