PRESENTER: This tutorial explores checkboxes
and radio buttons.
We're going to cover which elements
to use, the markup, the name attribute,
adding a caption, and styling radio buttons and checkboxes.
Section one, which element to use?
Radio buttons should be used when you want to present users
with more than one option, and you
want to allow them to choose only one of these options.
For example, if you wanted users to choose a subscription
option, you would use a series of radio buttons
to present all options.
Checkboxes, on the other hand, should only
be used when you want to present users with one of more options
and you want to allow them to choose
any number of these options.
For example, if you wanted users to subscribe to a newsletter,
you would present users with a single checkbox.
If you wanted to find out what sort of applications
the users have at home, you would
use a series of checkboxes to present all options.
Section two, markup.
Radio buttons and checkboxes require an input element
and an associated label element.
In both cases, the label elements
once need to be positioned after the inputs.
These two elements need to be explicitly associated
with each other, using the "for" and "ID" attributes.
If the label is wrapped around the input,
the label content must come after the input.
Section three, the name attribute.
In the case of radio buttons, the name attribute
is important.
The value for the name attribute must
be identical for all radio buttons that are used
in the same set of options.
This identical name value means that users can only
choose one option from within a set of options.
In this example, all the input elements
have the name attribute with an identical value of "sub."
Section four, adding a caption.
When presenting a set of radio buttons,
a caption is needed to explain their purpose.
This is done by wrapping a radio button set inside a field set
and then using the legend as a caption.
In this example, the content, "subscription method"
would then be announced when the user sets focus
on the first radio button when they're traveling down
the form.
And the same information would also
be announced when the user sets focused on the last radio
button when traveling up the form.
An alternate approach.
An alternative approach is to use the aria role and aria
label by attributes.
The overall container needs to be set with a role attribute
and with the value of radiogroup.
A heading needs to be placed inside the container,
and this will become the caption for this group
of radio buttons.
The heading needs to be given an ID value,
and then the overall container needs
to point to this heading element.
In this case, both of them have a value of sub.
This solution will operate in a similar way
to field set and legion elements.
The heading will be announced as a caption for the radio group.
Section 5, styling radio buttons and checkboxes.
One common concern that developers
have with radio buttons and checkboxes
is that they are hard to visually customize.
Some developers solve this problem using the div element
and custom background images instead of using a native input
and label element.
However, these types of solutions
present a range of accessibility issues.
Unlike the input and label elements,
div elements used in this way have no semantic meaning.
And the solution doesn't have any in-built keyboard
functionality.
So keyboard-only users often can't navigate or select
options.
Using background images for radio buttons and checkboxes
also presents issues for users who use high contrast mode.
Background images are often not displayed when in this mode,
so users have no way of identifying these custom radio
buttons or checkboxes.
A simple solution is to use native radio buttons
and checkbox elements, and then use CSS
to add a pseudo-element on top.
This pseudo-element can be given a background image
so that radio buttons and checkboxes can be customized.
With this solution, if the background images
aren't available, the native input elements underneath
are displayed.
Now this is going to be covered in a later video.
Conclusion-- so there you have it--
a simple review of checkboxes and radio buttons.
Except where otherwise noted, this work
is licensed under a Creative Commons
by Attribution Sharealike 4.0 License,
copyright 2018, California Community Colleges Chancellor's
Office.
These works are licensed under a Creative Commons Attribution
4.0 International license.
They're available to everyone and maybe repurposed
to meet the unique needs of educational institutions.