Transcript
PRESENTER: This tutorial explores explicit and implicit form labels. We're going to cover what are explicit labels, when a label's required for form controls, should labels be before or after they form controls, wrapping labels around form controls, and using hidden labels.
Section one. What are explicit labels? The label element is used to provide a description for form controls. Form controls are elements within forms that allow user interactions, such as Submit buttons, inputs, select dropdown, text areas, radio buttons, and checkboxes.
Form controls must have explicit labels. This means that assisted technologies will announce the label when the user interacts with a form control. Form labels can be explicitly associated with your form controls, using the FOR and ID attributes. The FOR attribute is applied to the label. And the ID attribute is applied to the form control. In this example, the label element has a FOR value of name. The form control has an ID value of name.
Section two. When are labels required to form controls? Some forms don't require a label element to describe their purpose. For example, the Button element uses the content of the button as a label. The input type equals hidden requires no label, as it's not displayed or made available to users. Its purpose is to let developers include data that can't be seen or modified by users when a form is submitted.
The input type equals Button, Submit, and Reset are buttons. And they use their values as a label. However, all other form controls should use an explicit label.
Section three. Should labels be before or after their form controls? In all cases, except for radio buttons and checkboxes, the content of the label must come before the form control. In this mock-up example, the label element is placed before the input element. And this is how it would appear. The label element is also placed before the select element. And this is how it would appear. And the label element is placed before the text area element. And this is how it would appear.
However, for radio buttons and checkboxes, the label or its contents must come after the form control. In this example, the label elements are placed after the radio buttons. And this is how this example would appear. And in this example, the label is placed after the checkbox element. And this is how it would appear.
Section four, wrapping labels around form controls. The label element can be wrapped around the contents of the label and the form control itself. However, this will mean that the label is implicitly associated with the form control, rather than being explicitly associated. Using this method, some older assistive technologies may not associate the label with the form control. For this reason, the FOR an ID attributes must still be used, so there's an explicit relationship.
Placement of content. When wrapping the label element around form controls, the placement of the label content becomes critical. In all instances, except for radio buttons and checkboxes, the contents of the label must come before the form control. In this example, the label wraps around the input and the contents of the label is placed before the input. And this is how it would appear with the label wrapping around the content and the input.
In this example, the label content of choose a number is placed before the select. And this is how it would appear. And in this example, the label content of add a comment is placed before the text area. And this is how it would appear.
For radio buttons and checkboxes, the contents of the label must come after the form control. In this case, the label content of yes and no are placed after the radio buttons. And this is how this example would appear. In this example, the label content of subscribe is placed after the input with the type of checkbox. And this is how it would appear.
Section five, using hidden labels. In rare cases, it may be hard or impossible to display the label element associated with the input. This can occur when there's an extremely tight visual space around the input element. An example might be a site-wide search form that sits in a menu bar along the top of the screen. In these cases, it's considered acceptable to hide the label from sighted users, as long as the following conditions are met.
Number one, an explicit label is still provided within the code for assistive technologies. Number two, the form contains only a single input and a Submit button. Number three, the purpose of the form is very clear to sighted users. Number four, the contents of the button clearly describes the purpose of the forum. If all these conditions are made, the label can be visually hidden off screen.
In this case, the label has been given a class of visually hidden. And the CSS is for this class would look something like this, with declarations of border 0, clip rectangular, height 1px, margin minus 1px, overflow hidden, padding 0, position absolute, and width 1px.
Authors should never use display none to hide the label element. Using display none will mean that the label element is also hidden from screen readers. An alternative approach to visually hiding the label is to use the aria-label attribute on the input element. This will be explored in a later video called aria-label versus aria-labeled by versus aria-described by.
Conclusion. So there you have it, a simple explanation of explicit and implicit form labels.
Except where otherwise noted, this work is licensed under Creative Commons by Attribution ShareAlike 4.0 license. Copyright 2018, California Community Colleges Chancellor's Office. These works are licensed under Creative Commons Attribution 4.0 International License. They're available to everyone and may be repurposed to meet the unique needs of educational institutions.