WEBVTT

00:00:00.000 --> 00:00:03.624 align:middle line:90%


00:00:03.624 --> 00:00:06.870 align:middle line:84%
PRESENTER: This tutorial
explores explicit and implicit

00:00:06.870 --> 00:00:08.340 align:middle line:90%
form labels.

00:00:08.340 --> 00:00:11.300 align:middle line:84%
We're going to cover what
are explicit labels, when

00:00:11.300 --> 00:00:13.770 align:middle line:84%
a label's required
for form controls,

00:00:13.770 --> 00:00:17.480 align:middle line:84%
should labels be before or
after they form controls,

00:00:17.480 --> 00:00:19.830 align:middle line:84%
wrapping labels
around form controls,

00:00:19.830 --> 00:00:22.980 align:middle line:90%
and using hidden labels.

00:00:22.980 --> 00:00:24.090 align:middle line:90%
Section one.

00:00:24.090 --> 00:00:26.700 align:middle line:90%
What are explicit labels?

00:00:26.700 --> 00:00:29.610 align:middle line:84%
The label element is used to
provide a description for form

00:00:29.610 --> 00:00:30.920 align:middle line:90%
controls.

00:00:30.920 --> 00:00:33.090 align:middle line:84%
Form controls are
elements within forms

00:00:33.090 --> 00:00:39.270 align:middle line:84%
that allow user interactions,
such as Submit buttons, inputs,

00:00:39.270 --> 00:00:45.560 align:middle line:84%
select dropdown, text areas,
radio buttons, and checkboxes.

00:00:45.560 --> 00:00:49.020 align:middle line:84%
Form controls must
have explicit labels.

00:00:49.020 --> 00:00:51.120 align:middle line:84%
This means that
assisted technologies

00:00:51.120 --> 00:00:53.910 align:middle line:84%
will announce the label when
the user interacts with a form

00:00:53.910 --> 00:00:55.230 align:middle line:90%
control.

00:00:55.230 --> 00:00:57.840 align:middle line:84%
Form labels can be
explicitly associated

00:00:57.840 --> 00:01:02.700 align:middle line:84%
with your form controls, using
the FOR and ID attributes.

00:01:02.700 --> 00:01:05.190 align:middle line:84%
The FOR attribute is
applied to the label.

00:01:05.190 --> 00:01:08.910 align:middle line:84%
And the ID attribute is
applied to the form control.

00:01:08.910 --> 00:01:11.040 align:middle line:84%
In this example,
the label element

00:01:11.040 --> 00:01:13.320 align:middle line:90%
has a FOR value of name.

00:01:13.320 --> 00:01:17.220 align:middle line:84%
The form control has
an ID value of name.

00:01:17.220 --> 00:01:18.400 align:middle line:90%
Section two.

00:01:18.400 --> 00:01:21.740 align:middle line:84%
When are labels required
to form controls?

00:01:21.740 --> 00:01:24.050 align:middle line:84%
Some forms don't
require a label element

00:01:24.050 --> 00:01:26.300 align:middle line:90%
to describe their purpose.

00:01:26.300 --> 00:01:29.090 align:middle line:84%
For example, the Button
element uses the content

00:01:29.090 --> 00:01:31.510 align:middle line:90%
of the button as a label.

00:01:31.510 --> 00:01:34.670 align:middle line:84%
The input type equals
hidden requires no label,

00:01:34.670 --> 00:01:38.360 align:middle line:84%
as it's not displayed or
made available to users.

00:01:38.360 --> 00:01:40.610 align:middle line:84%
Its purpose is to let
developers include

00:01:40.610 --> 00:01:43.910 align:middle line:84%
data that can't be seen
or modified by users

00:01:43.910 --> 00:01:45.950 align:middle line:90%
when a form is submitted.

00:01:45.950 --> 00:01:49.760 align:middle line:84%
The input type equals Button,
Submit, and Reset are buttons.

00:01:49.760 --> 00:01:52.310 align:middle line:84%
And they use their
values as a label.

00:01:52.310 --> 00:01:57.470 align:middle line:84%
However, all other form controls
should use an explicit label.

00:01:57.470 --> 00:01:58.580 align:middle line:90%
Section three.

00:01:58.580 --> 00:02:02.770 align:middle line:84%
Should labels be before or
after their form controls?

00:02:02.770 --> 00:02:05.530 align:middle line:84%
In all cases, except for
radio buttons and checkboxes,

00:02:05.530 --> 00:02:09.789 align:middle line:84%
the content of the label must
come before the form control.

00:02:09.789 --> 00:02:12.100 align:middle line:84%
In this mock-up example,
the label element

00:02:12.100 --> 00:02:15.040 align:middle line:84%
is placed before
the input element.

00:02:15.040 --> 00:02:17.830 align:middle line:90%
And this is how it would appear.

00:02:17.830 --> 00:02:21.370 align:middle line:84%
The label element is also placed
before the select element.

00:02:21.370 --> 00:02:24.390 align:middle line:90%
And this is how it would appear.

00:02:24.390 --> 00:02:28.440 align:middle line:84%
And the label element is placed
before the text area element.

00:02:28.440 --> 00:02:31.420 align:middle line:90%
And this is how it would appear.

00:02:31.420 --> 00:02:34.030 align:middle line:84%
However, for radio
buttons and checkboxes,

00:02:34.030 --> 00:02:38.710 align:middle line:84%
the label or its contents must
come after the form control.

00:02:38.710 --> 00:02:40.460 align:middle line:84%
In this example,
the label elements

00:02:40.460 --> 00:02:43.450 align:middle line:84%
are placed after
the radio buttons.

00:02:43.450 --> 00:02:46.430 align:middle line:84%
And this is how this
example would appear.

00:02:46.430 --> 00:02:48.770 align:middle line:84%
And in this example,
the label is placed

00:02:48.770 --> 00:02:51.150 align:middle line:90%
after the checkbox element.

00:02:51.150 --> 00:02:54.420 align:middle line:90%
And this is how it would appear.

00:02:54.420 --> 00:02:58.614 align:middle line:84%
Section four, wrapping
labels around form controls.

00:02:58.614 --> 00:03:00.780 align:middle line:84%
The label element can be
wrapped around the contents

00:03:00.780 --> 00:03:03.710 align:middle line:84%
of the label and the
form control itself.

00:03:03.710 --> 00:03:06.600 align:middle line:84%
However, this will mean
that the label is implicitly

00:03:06.600 --> 00:03:08.340 align:middle line:84%
associated with
the form control,

00:03:08.340 --> 00:03:11.610 align:middle line:84%
rather than being
explicitly associated.

00:03:11.610 --> 00:03:14.730 align:middle line:84%
Using this method, some
older assistive technologies

00:03:14.730 --> 00:03:18.450 align:middle line:84%
may not associate the label
with the form control.

00:03:18.450 --> 00:03:22.480 align:middle line:84%
For this reason, the FOR an ID
attributes must still be used,

00:03:22.480 --> 00:03:25.230 align:middle line:84%
so there's an
explicit relationship.

00:03:25.230 --> 00:03:27.090 align:middle line:90%
Placement of content.

00:03:27.090 --> 00:03:29.550 align:middle line:84%
When wrapping the label
element around form controls,

00:03:29.550 --> 00:03:32.370 align:middle line:84%
the placement of the label
content becomes critical.

00:03:32.370 --> 00:03:36.000 align:middle line:84%
In all instances, except for
radio buttons and checkboxes,

00:03:36.000 --> 00:03:40.710 align:middle line:84%
the contents of the label must
come before the form control.

00:03:40.710 --> 00:03:43.640 align:middle line:84%
In this example, the label
wraps around the input

00:03:43.640 --> 00:03:47.120 align:middle line:84%
and the contents of the label
is placed before the input.

00:03:47.120 --> 00:03:49.530 align:middle line:84%
And this is how it would
appear with the label wrapping

00:03:49.530 --> 00:03:52.490 align:middle line:84%
around the content
and the input.

00:03:52.490 --> 00:03:55.080 align:middle line:84%
In this example,
the label content of

00:03:55.080 --> 00:03:58.720 align:middle line:84%
choose a number is
placed before the select.

00:03:58.720 --> 00:04:01.730 align:middle line:90%
And this is how it would appear.

00:04:01.730 --> 00:04:05.090 align:middle line:84%
And in this example, the
label content of add a comment

00:04:05.090 --> 00:04:07.650 align:middle line:90%
is placed before the text area.

00:04:07.650 --> 00:04:10.600 align:middle line:90%
And this is how it would appear.

00:04:10.600 --> 00:04:12.400 align:middle line:84%
For radio buttons
and checkboxes,

00:04:12.400 --> 00:04:16.180 align:middle line:84%
the contents of the label must
come after the form control.

00:04:16.180 --> 00:04:19.769 align:middle line:84%
In this case, the label
content of yes and no

00:04:19.769 --> 00:04:22.540 align:middle line:84%
are placed after
the radio buttons.

00:04:22.540 --> 00:04:25.470 align:middle line:84%
And this is how this
example would appear.

00:04:25.470 --> 00:04:28.530 align:middle line:84%
In this example, the
label content of subscribe

00:04:28.530 --> 00:04:32.040 align:middle line:84%
is placed after the input
with the type of checkbox.

00:04:32.040 --> 00:04:35.320 align:middle line:90%
And this is how it would appear.

00:04:35.320 --> 00:04:38.530 align:middle line:84%
Section five, using
hidden labels.

00:04:38.530 --> 00:04:42.610 align:middle line:84%
In rare cases, it may be
hard or impossible to display

00:04:42.610 --> 00:04:45.040 align:middle line:84%
the label element
associated with the input.

00:04:45.040 --> 00:04:48.430 align:middle line:84%
This can occur when there's an
extremely tight visual space

00:04:48.430 --> 00:04:50.560 align:middle line:90%
around the input element.

00:04:50.560 --> 00:04:52.750 align:middle line:84%
An example might be
a site-wide search

00:04:52.750 --> 00:04:56.890 align:middle line:84%
form that sits in a menu bar
along the top of the screen.

00:04:56.890 --> 00:05:00.610 align:middle line:84%
In these cases, it's considered
acceptable to hide the label

00:05:00.610 --> 00:05:03.490 align:middle line:84%
from sighted users, as long as
the following conditions are

00:05:03.490 --> 00:05:04.420 align:middle line:90%
met.

00:05:04.420 --> 00:05:06.790 align:middle line:84%
Number one, an
explicit label is still

00:05:06.790 --> 00:05:10.240 align:middle line:84%
provided within the code
for assistive technologies.

00:05:10.240 --> 00:05:13.300 align:middle line:84%
Number two, the form
contains only a single input

00:05:13.300 --> 00:05:14.770 align:middle line:90%
and a Submit button.

00:05:14.770 --> 00:05:16.930 align:middle line:84%
Number three, the
purpose of the form

00:05:16.930 --> 00:05:19.810 align:middle line:90%
is very clear to sighted users.

00:05:19.810 --> 00:05:22.180 align:middle line:84%
Number four, the
contents of the button

00:05:22.180 --> 00:05:25.150 align:middle line:84%
clearly describes the
purpose of the forum.

00:05:25.150 --> 00:05:26.920 align:middle line:84%
If all these
conditions are made,

00:05:26.920 --> 00:05:30.490 align:middle line:84%
the label can be visually
hidden off screen.

00:05:30.490 --> 00:05:32.200 align:middle line:84%
In this case, the
label has been given

00:05:32.200 --> 00:05:35.210 align:middle line:90%
a class of visually hidden.

00:05:35.210 --> 00:05:38.660 align:middle line:84%
And the CSS is for this class
would look something like this,

00:05:38.660 --> 00:05:42.710 align:middle line:84%
with declarations of border
0, clip rectangular, height

00:05:42.710 --> 00:05:48.980 align:middle line:84%
1px, margin minus 1px, overflow
hidden, padding 0, position

00:05:48.980 --> 00:05:52.080 align:middle line:90%
absolute, and width 1px.

00:05:52.080 --> 00:05:56.690 align:middle line:84%
Authors should never use display
none to hide the label element.

00:05:56.690 --> 00:05:59.840 align:middle line:84%
Using display none will mean
that the label element is also

00:05:59.840 --> 00:06:02.240 align:middle line:90%
hidden from screen readers.

00:06:02.240 --> 00:06:04.910 align:middle line:84%
An alternative approach to
visually hiding the label

00:06:04.910 --> 00:06:09.110 align:middle line:84%
is to use the aria-label
attribute on the input element.

00:06:09.110 --> 00:06:11.310 align:middle line:84%
This will be explored
in a later video called

00:06:11.310 --> 00:06:16.900 align:middle line:84%
aria-label versus aria-labeled
by versus aria-described by.

00:06:16.900 --> 00:06:18.340 align:middle line:90%
Conclusion.

00:06:18.340 --> 00:06:20.530 align:middle line:84%
So there you have it,
a simple explanation

00:06:20.530 --> 00:06:24.090 align:middle line:84%
of explicit and
implicit form labels.

00:06:24.090 --> 00:06:26.040 align:middle line:84%
Except where otherwise
noted, this work

00:06:26.040 --> 00:06:27.840 align:middle line:84%
is licensed under
Creative Commons

00:06:27.840 --> 00:06:31.500 align:middle line:84%
by Attribution
ShareAlike 4.0 license.

00:06:31.500 --> 00:06:34.590 align:middle line:84%
Copyright 2018,
California Community

00:06:34.590 --> 00:06:37.260 align:middle line:90%
Colleges Chancellor's Office.

00:06:37.260 --> 00:06:40.140 align:middle line:84%
These works are licensed under
Creative Commons Attribution

00:06:40.140 --> 00:06:42.940 align:middle line:90%
4.0 International License.

00:06:42.940 --> 00:06:44.860 align:middle line:84%
They're available
to everyone and may

00:06:44.860 --> 00:06:46.980 align:middle line:84%
be repurposed to
meet the unique needs

00:06:46.980 --> 00:06:50.150 align:middle line:90%
of educational institutions.