Influence of explicit label, implicit label and screen reader in html forms

The label element is prosaic, is to label the form input elements, easy to identify. A very important attribute of label is for, which binds a label with the input elements it identifies to provide a better operational experience.

Explicit Label

<label for= "foo" ></label><input type= "text" id= "foo" >

Reset and Submit buttons, picture buttons, and button element buttons do not use explicit label because they already have an implicit label, such as value and ALT attribute values, the contents of the button element.

Explicit label is most friendly to accessibility.

Implicit label

The input element is wrapped directly within the label tag, and the for attribute can be omitted, even the ID of the input element can be omitted.

<label>sometext<input type= "Text" ></label>

IE6 does not support implicit label

Mixed Label

Wraps the INPUT element within the label, even with the for attribute of the label

<label for= "foo" ><input type= "text" id= "foo" ></label>


table Tan Xian label and implicit label effects on screen reader users

Explicit label

This means adding a for attribute for the LABEL element whose property value is the same as the value of the form control's ID property.
Reset and Submit buttons (<input type= "reset"/>, <input type= "submit"/>), picture buttons (<input type= "img"/>), and Script buttons (< button></button>) do not use explicit label because they already have an implicit label, such as value and ALT attribute values, the contents of the button element.

<label for= "FirstName" >first name:</label><input type= "text" name= "FirstName" id= "FirstName" TabIndex = "1"/>

Implicit label

According to the HTML 4.01 specification, you can create an "implicit label" by wrapping the form control and the label text with a LABEL element.
This is not recommended because some browsers (IE6) do not support implicit label,wcag2.0.

<label>first Name: <input type= "text" name= "FirstName"/></label>

Another kind of writing, namely the combination of the above two methods:

<label for= "FirstName" >first Name:
<input type= "text" name= "FirstName" id= "FirstName" tabindex= "1"/></label>

the difference between the two

Using screen readers Nvda and IE9 tests found that the content of the prompts that screen readers hear is different:

Explicit label notation: "Ffirst Name: edit box blank (or content)"
Implicit label writing: ' First Name: text First Name: edit box blank (or content) ' – Two methods are consistent, but the last one is not able to activate the form control by clicking on the label in all browsers (the author of the demo has changed) and strongly does not recommend it.

As you can see, Nvda repeats the label text content, and it's easier for screen reader users to understand the hint of explicit label writing.

Update: Today I saw HTML5 Accessibility Chops:form control labeling to do the same test, the author tested more browsers and screen readers, today's test, got the same conclusion: use for and ID And the form control is the most robust method that is not placed inside a LABEL element.