WEBVTT

00:00:00.000 --> 00:00:03.624


00:00:03.624 --> 00:00:06.870
PRESENTER: This tutorial
explores explicit and implicit

00:00:06.870 --> 00:00:08.340
form labels.

00:00:08.340 --> 00:00:11.300
We're going to cover what
are explicit labels, when

00:00:11.300 --> 00:00:13.770
a label's required
for form controls,

00:00:13.770 --> 00:00:17.480
should labels be before or
after they form controls,

00:00:17.480 --> 00:00:19.830
wrapping labels
around form controls,

00:00:19.830 --> 00:00:22.980
and using hidden labels.

00:00:22.980 --> 00:00:24.090
Section one.

00:00:24.090 --> 00:00:26.700
What are explicit labels?

00:00:26.700 --> 00:00:29.610
The label element is used to
provide a description for form

00:00:29.610 --> 00:00:30.920
controls.

00:00:30.920 --> 00:00:33.090
Form controls are
elements within forms

00:00:33.090 --> 00:00:39.270
that allow user interactions,
such as Submit buttons, inputs,

00:00:39.270 --> 00:00:45.560
select dropdown, text areas,
radio buttons, and checkboxes.

00:00:45.560 --> 00:00:49.020
Form controls must
have explicit labels.

00:00:49.020 --> 00:00:51.120
This means that
assisted technologies

00:00:51.120 --> 00:00:53.910
will announce the label when
the user interacts with a form

00:00:53.910 --> 00:00:55.230
control.

00:00:55.230 --> 00:00:57.840
Form labels can be
explicitly associated

00:00:57.840 --> 00:01:02.700
with your form controls, using
the FOR and ID attributes.

00:01:02.700 --> 00:01:05.190
The FOR attribute is
applied to the label.

00:01:05.190 --> 00:01:08.910
And the ID attribute is
applied to the form control.

00:01:08.910 --> 00:01:11.040
In this example,
the label element

00:01:11.040 --> 00:01:13.320
has a FOR value of name.

00:01:13.320 --> 00:01:17.220
The form control has
an ID value of name.

00:01:17.220 --> 00:01:18.400
Section two.

00:01:18.400 --> 00:01:21.740
When are labels required
to form controls?

00:01:21.740 --> 00:01:24.050
Some forms don't
require a label element

00:01:24.050 --> 00:01:26.300
to describe their purpose.

00:01:26.300 --> 00:01:29.090
For example, the Button
element uses the content

00:01:29.090 --> 00:01:31.510
of the button as a label.

00:01:31.510 --> 00:01:34.670
The input type equals
hidden requires no label,

00:01:34.670 --> 00:01:38.360
as it's not displayed or
made available to users.

00:01:38.360 --> 00:01:40.610
Its purpose is to let
developers include

00:01:40.610 --> 00:01:43.910
data that can't be seen
or modified by users

00:01:43.910 --> 00:01:45.950
when a form is submitted.

00:01:45.950 --> 00:01:49.760
The input type equals Button,
Submit, and Reset are buttons.

00:01:49.760 --> 00:01:52.310
And they use their
values as a label.

00:01:52.310 --> 00:01:57.470
However, all other form controls
should use an explicit label.

00:01:57.470 --> 00:01:58.580
Section three.

00:01:58.580 --> 00:02:02.770
Should labels be before or
after their form controls?

00:02:02.770 --> 00:02:05.530
In all cases, except for
radio buttons and checkboxes,

00:02:05.530 --> 00:02:09.789
the content of the label must
come before the form control.

00:02:09.789 --> 00:02:12.100
In this mock-up example,
the label element

00:02:12.100 --> 00:02:15.040
is placed before
the input element.

00:02:15.040 --> 00:02:17.830
And this is how it would appear.

00:02:17.830 --> 00:02:21.370
The label element is also placed
before the select element.

00:02:21.370 --> 00:02:24.390
And this is how it would appear.

00:02:24.390 --> 00:02:28.440
And the label element is placed
before the text area element.

00:02:28.440 --> 00:02:31.420
And this is how it would appear.

00:02:31.420 --> 00:02:34.030
However, for radio
buttons and checkboxes,

00:02:34.030 --> 00:02:38.710
the label or its contents must
come after the form control.

00:02:38.710 --> 00:02:40.460
In this example,
the label elements

00:02:40.460 --> 00:02:43.450
are placed after
the radio buttons.

00:02:43.450 --> 00:02:46.430
And this is how this
example would appear.

00:02:46.430 --> 00:02:48.770
And in this example,
the label is placed

00:02:48.770 --> 00:02:51.150
after the checkbox element.

00:02:51.150 --> 00:02:54.420
And this is how it would appear.

00:02:54.420 --> 00:02:58.614
Section four, wrapping
labels around form controls.

00:02:58.614 --> 00:03:00.780
The label element can be
wrapped around the contents

00:03:00.780 --> 00:03:03.710
of the label and the
form control itself.

00:03:03.710 --> 00:03:06.600
However, this will mean
that the label is implicitly

00:03:06.600 --> 00:03:08.340
associated with
the form control,

00:03:08.340 --> 00:03:11.610
rather than being
explicitly associated.

00:03:11.610 --> 00:03:14.730
Using this method, some
older assistive technologies

00:03:14.730 --> 00:03:18.450
may not associate the label
with the form control.

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

00:03:22.480 --> 00:03:25.230
so there's an
explicit relationship.

00:03:25.230 --> 00:03:27.090
Placement of content.

00:03:27.090 --> 00:03:29.550
When wrapping the label
element around form controls,

00:03:29.550 --> 00:03:32.370
the placement of the label
content becomes critical.

00:03:32.370 --> 00:03:36.000
In all instances, except for
radio buttons and checkboxes,

00:03:36.000 --> 00:03:40.710
the contents of the label must
come before the form control.

00:03:40.710 --> 00:03:43.640
In this example, the label
wraps around the input

00:03:43.640 --> 00:03:47.120
and the contents of the label
is placed before the input.

00:03:47.120 --> 00:03:49.530
And this is how it would
appear with the label wrapping

00:03:49.530 --> 00:03:52.490
around the content
and the input.

00:03:52.490 --> 00:03:55.080
In this example,
the label content of

00:03:55.080 --> 00:03:58.720
choose a number is
placed before the select.

00:03:58.720 --> 00:04:01.730
And this is how it would appear.

00:04:01.730 --> 00:04:05.090
And in this example, the
label content of add a comment

00:04:05.090 --> 00:04:07.650
is placed before the text area.

00:04:07.650 --> 00:04:10.600
And this is how it would appear.

00:04:10.600 --> 00:04:12.400
For radio buttons
and checkboxes,

00:04:12.400 --> 00:04:16.180
the contents of the label must
come after the form control.

00:04:16.180 --> 00:04:19.769
In this case, the label
content of yes and no

00:04:19.769 --> 00:04:22.540
are placed after
the radio buttons.

00:04:22.540 --> 00:04:25.470
And this is how this
example would appear.

00:04:25.470 --> 00:04:28.530
In this example, the
label content of subscribe

00:04:28.530 --> 00:04:32.040
is placed after the input
with the type of checkbox.

00:04:32.040 --> 00:04:35.320
And this is how it would appear.

00:04:35.320 --> 00:04:38.530
Section five, using
hidden labels.

00:04:38.530 --> 00:04:42.610
In rare cases, it may be
hard or impossible to display

00:04:42.610 --> 00:04:45.040
the label element
associated with the input.

00:04:45.040 --> 00:04:48.430
This can occur when there's an
extremely tight visual space

00:04:48.430 --> 00:04:50.560
around the input element.

00:04:50.560 --> 00:04:52.750
An example might be
a site-wide search

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

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

00:05:00.610 --> 00:05:03.490
from sighted users, as long as
the following conditions are

00:05:03.490 --> 00:05:04.420
met.

00:05:04.420 --> 00:05:06.790
Number one, an
explicit label is still

00:05:06.790 --> 00:05:10.240
provided within the code
for assistive technologies.

00:05:10.240 --> 00:05:13.300
Number two, the form
contains only a single input

00:05:13.300 --> 00:05:14.770
and a Submit button.

00:05:14.770 --> 00:05:16.930
Number three, the
purpose of the form

00:05:16.930 --> 00:05:19.810
is very clear to sighted users.

00:05:19.810 --> 00:05:22.180
Number four, the
contents of the button

00:05:22.180 --> 00:05:25.150
clearly describes the
purpose of the forum.

00:05:25.150 --> 00:05:26.920
If all these
conditions are made,

00:05:26.920 --> 00:05:30.490
the label can be visually
hidden off screen.

00:05:30.490 --> 00:05:32.200
In this case, the
label has been given

00:05:32.200 --> 00:05:35.210
a class of visually hidden.

00:05:35.210 --> 00:05:38.660
And the CSS is for this class
would look something like this,

00:05:38.660 --> 00:05:42.710
with declarations of border
0, clip rectangular, height

00:05:42.710 --> 00:05:48.980
1px, margin minus 1px, overflow
hidden, padding 0, position

00:05:48.980 --> 00:05:52.080
absolute, and width 1px.

00:05:52.080 --> 00:05:56.690
Authors should never use display
none to hide the label element.

00:05:56.690 --> 00:05:59.840
Using display none will mean
that the label element is also

00:05:59.840 --> 00:06:02.240
hidden from screen readers.

00:06:02.240 --> 00:06:04.910
An alternative approach to
visually hiding the label

00:06:04.910 --> 00:06:09.110
is to use the aria-label
attribute on the input element.

00:06:09.110 --> 00:06:11.310
This will be explored
in a later video called

00:06:11.310 --> 00:06:16.900
aria-label versus aria-labeled
by versus aria-described by.

00:06:16.900 --> 00:06:18.340
Conclusion.

00:06:18.340 --> 00:06:20.530
So there you have it,
a simple explanation

00:06:20.530 --> 00:06:24.090
of explicit and
implicit form labels.

00:06:24.090 --> 00:06:26.040
Except where otherwise
noted, this work

00:06:26.040 --> 00:06:27.840
is licensed under
Creative Commons

00:06:27.840 --> 00:06:31.500
by Attribution
ShareAlike 4.0 license.

00:06:31.500 --> 00:06:34.590
Copyright 2018,
California Community

00:06:34.590 --> 00:06:37.260
Colleges Chancellor's Office.

00:06:37.260 --> 00:06:40.140
These works are licensed under
Creative Commons Attribution

00:06:40.140 --> 00:06:42.940
4.0 International License.

00:06:42.940 --> 00:06:44.860
They're available
to everyone and may

00:06:44.860 --> 00:06:46.980
be repurposed to
meet the unique needs

00:06:46.980 --> 00:06:50.150
of educational institutions.