PRESENTER: This tutorial explores explicit and implicit
form labels.
We're going to cover what are explicit labels, when
a label is required for form controls,
should labels be before or after the 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.