Talk about the accessibility of label tags in HTML5--zhang xin xu

first, the beginning of the DAO

A slightly more experienced page producer knows that label labels can gracefully expand the click area of a form control element, for example, a simple radio boxClicking on the area where the nose is so big is often less than a point. therefore, the use of label labels can be helpful for improving accessibility of pages.

Let's take a look at the registration page of the review web The check box for the consent clause, not the main point on the check box to Select:

View HTML discovery check box id and label label for property values are empty, puzzled ~ ~

Like the login of other websites or the click area of the registry control is pretty good, such as douban, Sina weibo, etc.:

We generally have two ways to gracefully extend the Click area of a form Control. One is label to wrap the control element with a label, and the other way is to use label the Label's for property associated with the control Element's ID.

In the HTML5 draft there are if paragraph text:

The label represents a caption in a user interface. The caption can 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.

The label label represents a caption on the user interface that can be associated with a developed form control, the so-called label element tag Control. You can use a for property, or put a form control label inside an element to implement the Association.

This means that we can do the following:
associating controls with for and IDs

<p><label for= "test" > Label </label> <input name= "input" type= "text" id= "test"/></p>

Label Label Wrapping Control

<p><label> label <input name= "input" type= "text"/></label></p>

- pronged approach

<p><label for= "test2" > Label <input name= "input" type= "text" id= "test2"/></label></p>

You can click here: the label element in HTML5 uses the demo

basically, in most browsers (IE6 the label method of wrapping the control is not the case), three methods can be expanded Single-line text box control of the click Area (click "label" word, text box is focus).

second, HTML5 and HTML 4.01 label different

In fact, the above mentioned several methods are not HTML5 in the new things, as early as in the HTML4.0, with the same thing on the above appear drip said. But the difference is that in HTML4, we can assign multiple label elements to a control element. It feels like the ancient support of Polygamy.

More than one is associated with the LABEL same control by creating multiple references via the for Attribute.

The Chinese meaning quoted above is: you can use more than 1 to label associate the same control with a for Property.

The above paragraph in the HTML5 play the hide-and-seek, did not see-not expressly prohibited use, nor expressly permitted to use. We should note that both the browser and the assistive technology
labelprovide strong support for multiple Elements.

third, the current control tagging in the browser and assistive technologyAvailability ofAccessibility support

According to the test of Steve Faulkner (advanced Web Usability Accessibility advisor), The for methods of using and id locating control elements are much better than the robustness of placing controls label within Tags. He also found that aria-labelledby the robustness of using attributes across browsers and assistive technologies was stronger than using standard control elements placed label under the Label.

Full testing and Results: tabbed support testing for mainstream browsers and screen reader controls

For example, the test results on the main browser are:

The results in the box show some of the above conclusions: for and id usability accessibility is better than label label wrapping, and non-standard aria-labelledby attributes actually have greater usability Accessibility.

The rest of the results with the data you are interested can look closely at the Match.

For our front-end, there is no need to know very well, and there is no analysis of each Result. however, Some suggestions or views are worth sharing.

Advice for Developers
Before the browser fixes some usability accessibility issues for them, if you want your control to be understood by assistive technology, It is recommended to use the for + id method instead of just putting the control element under the label simply because it is too lazy to get the egg to hurt lactic acid label . Don't use a "two-pronged" approach that looks more safe.

Advice to browsers and assistive technology developers

• Chrome: enables accessibility for/id support for availability of and label element Packages.
• Safari: enables accessibility label support for the availability of element Packages.
• Firefox: fixes for/id a problem with multi-label content when the inclusion is being used.
• NVDA: Fix an issue where control elements are label repeated within a read

Iv. End of the section

Usability Accessibility issues, What do you say? Many times, many front-end er, make a well-structured, functional page is already good, and then asked to consider the possibility of the problem, a little gig feeling.

Say a word of mouth, accessibility problems like the LV baby in the hands of the rich, we to most of the front-end er, for most of the small and medium-sized sites, there is no need to spend too much energy on this, after all, manpower and financial Constraints. But whether you believe it or not, there is one thing I believe in, knowing that understanding the various usability issues on the Web is helpful for your own growth and future Work.

Reference article: HTML5 Accessibility Chops:form Control labeling

Original article, reprint please indicate from Zhang Xin xu-xin space-xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=1809

(end of this Article)

Talk about the accessibility of label tags in HTML5--zhang xin xu