Form Controls in HTML: Labeling Form Controls

1. <label>… <label>

In the examples shown so far, form controls have been labeled by simply placing text before them. However, this is limiting in various ways. For example, it makes it difficult to isolate them for styling, and since such labeling has no semantic meaning, it is not recognized by assistive technologies used by people with disabilities, making a form inaccessible to these users. The <label> element is designed to solve this problem and allows a label to be associated with a control. Table 5.17 lists the attributes that it supports.

The <label> element can be used with or without the for attribute and can be wrapped around just the label of a form element or the label and the- element. Figure 5.53 shows typical usage, and Figure 5.54 depicts the result.

Notice that all the approaches produce the same type of labeling. In the code, numbers 1 and 2 show just the <label> element used, first to encapsulate the label and second to encapsulate both the label and the <input> element. Numbers 3 and 4 use the same principles but with the addition of the for and id attributes. This is known as the label reference technique, because the id attribute is used to associate the <input> element with the <label> element. Since an id is unique in a form, only one label can be associated with a form control. While all the four approaches are compatible with assistive technologies and are supported by HTML specification, number 3 is most commonly used, because it allows for the label to be styled separately and is consistent with how other types of controls are labeled.

In some cases, the purpose of a form control may be clear enough, such that adding a label will create redundancy visually. An example is a text field that has a search button next to it. In such cases, although label is still added to make the control accessible to assistive technologies, it is made invisible by hiding it by using CSS. An alternative is to use the aria-label
attribute, which provides a label to identify a form control to assistive technologies but does not provide the information visually. Figure 5.55 shows how the attribute is used, and Figure 5.56 depicts the result. Although the title attribute can also be used for this, it is not supported by some screen readers and assistive technologies.

2. Labeling and Accessibility

In addition to the point just made about labels and accessibility, there are other guidelines, especially regarding the placement of labels in relation to form controls. Although there are no strict rules, the best practice is to follow popular placement convention. This ensures that a form is not confusing to use and is accessible. For form controls that display text fields and select boxes, the convention is to place labels above them or to the left, depending on various factor. For example, visually impaired users and mobile phone users benefit from placing them above, because this reduces the width of a form and therefore the need for horizontal scrolling. For radio buttons and checkboxes, it is typical to place labels to the right.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *