CODEWITHSUNDEEP
htmllabelaccessibilityformssemantic-markup
DMCoding
DMCoding

Reputation: 1237

<label for="idx"> vs <label for="namex">

I'm working implementing a WCAG accessiblity report for a major website. Predictably, one of the recurring issues is labels in forms.

Until now, I had presumed that the correct way to associate a form label with it's element was to use the input element's name in the label's form attribute, like so:

<label for="name[1]">Your name: </label>
<input type="text" name="name[1]" placeholder="Your name">

However the framework the client is used prefers to spit out code like this:

<label for="user_first_name">Your name: </label>
<input type="text" name="name[1]" id="user_first_name" placeholder="Your name">

My logic was based on the understanding that not all form elements have the 'ID' attribute allowing them to be uniquely manipulated by the DOM (e.g. CSS and Javascript), but all POST- and GET- method form elements do have the 'name' attribute allowing to submit data to a remote server, the most common use for a client-side browser form.

I do not want to submit a PR to the client with a faulty understanding of the purpose of the "for" attribute in label tags which will cause them to fail their next WCAG audit.

So which is it?

Upvotes: 1

Views: 577

Answers (4)

Tsundoku
Tsundoku

Reputation: 2697

According to the HTML 5.2 specification,

The for attribute may be specified to indicate a form control with which the caption is to be associated. 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. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element’s labeled control.

In other words, the for attribute references the id attribute of an form element such as input, textarea or select. The id attribute needs to have a value that is unique in the entire document (this applies to any element's id attribute), whereas the name attribute does not need to be unique. For example, the radio buttons in a group of radio buttons share the same name.

Since HTML5.x is written for browser developers and not for web developers, this is sometimes harder to find out than in the now superseded HTML 4.01 specification. The HTML 4.01 specification had a table of attributes that included information on each attribute's type:

  • id's type is ID, which means its value needs to be unique inside the entire document,
  • for's type is IDREF, which that its value reference an attribute of type ID,
  • name's type is CDATA, i.e. "a sequence of characters from the document character set".

(The types ID, IDREF and CDATA come from SGML DTDs, which were initially also used for XML documents, before the introduction of XSD and other schema languages. HTML5 does not use any formal SGML or XML schema language.)

So if you want to connect label elements to form elements using the for attribute, those form elements will need an id attribute. This is also reflected in Technique H44 for WCAG 2.x, where the examples show the for and id technique.

Upvotes: 0

slugolicious
slugolicious

Reputation: 17475

Just to complete out the previous answers, the html spec for the FOR attribute of the <label> is pretty clear:

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute’s value must be the ID of a labelable element...

And while @Erikm's example of an inplicit label is technically correct from a spec perspective, there are some screen readers that will not associate the label with the input without the for attribute. That's a bug with the screen reader but you should still work around it by specifying for.

<label for='myid'>Your name:<br>
<input type="text" name="name[1]" id='myid'></label>

Note that having a <label for="some-id"> not only associates the label with the input field, which is essential for screen reader users, but it is also a benefit to sighted mouse users too because they can click on the label and the focus will move into the input field.

Upvotes: 2

Erikm
Erikm

Reputation: 69

The value of the for attribute of the label element must be the ID of a non-hidden form control.

Or you can wrap the input field inside the label e.g.

<label>Your name:<br>
<input type="text" name="name[1]"></label>

Upvotes: 5

QuentinC
QuentinC

Reputation: 14722

The for attribute of the label always refers to the id of the field.

The naming is unfortunate and may be confusing, but in fact, the only use of name is effectively on server side as you mentioned.

It is perfectly possible to have a field with an id but no name, if it is entirely processed with JavaScript. This is becoming more and more frequent with frameworks like Angular or React.

IN the opposite, there couldn't be any label linked to a field if it has no id. Since a field must have a label telling what input is expected, every field should have an id. Otherwise your site or application can't be accessible.

Upvotes: 4

Related Questions