developer.paciellogroup.com

HTML5 Accessibility Chops: form control labeling

Steve Faulkner
3-4 minutes

There are 2 methods of labelling a form control using the HTML label element. You can wrap the control inside the label element or you can include the for attribute on the label element, which has a value matching the id value of the control it is intended to label.

What the HTML5 specification says

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using for attribute, or by putting the form control inside the label element itself.

What it means:

Control labeled using for and id

<label for="tex">label</label> <input name="input" type="text" id="tex">

Control inside the label

<label>label wrapped <input type="text"></label>

Control labeled using for & id and inside the label

<label for="a2">label wrapped and for/id <input type="text" id="a2"> with text before and after input</label>

HTML5 Differences to HTML 4.01

These labelling methods are not new to HTML5, they are the same as in HTML 4.0. One difference to note is that in HTML 4 you could assign multiple label elements to a control:

More than one LABEL
may be associated with the same control by creating multiple references via the for attribute.

This does not appear to be the case in HTML5, while not explicitly forbidden, it is not mentioned that it is allowed. It should also be noted that neither browsers or assistive technology (AT)  have provided robust support for multiple labels.

Current accessibility support for form control labeling in browsers and AT

I ran some tests and found that a control labeled using for and id without placing the control inside the label element is by far the most robust method. I also found use of aria-labelledby is more robust across browsers and AT than the standard HTML method of placing a control inside the label.

Complete test and results: Testing form control labelling support in popular browsers and screen readers

Advice for developers

Assuming the testing is accurate:

Until browser implementers fix their accessibility support, if you want controls to be understandable to AT users label controls using for and id. Do not use the control inside the label method. Do not use a combination of the 2 methods.

Advice for Browser and AT implementers

Assuming the testing is accurate:

  • Chrome: Implement accessibility support for for/id and label element wrapping. (filed a bug)
  • Safari: Implement accessibility support for label element wrapping. (emailed bug report)
  • Firefox: fix the issue with duplication of label content when for/id and wrapped combination is used. (filed bug)
  • NVDA: fix the issue of label repetition when a control is inside a label.(filed bug)

Advice to self

Spend more time working on the HTML Accessibility API Mappings 1.0 so that how this accessibility stuff should and does work is specified somewhere.