PRESENTER: This tutorial explores required form fields.
We're going to cover what are required form fields,
dealing with sighted users, and dealing
with visioning page users.
Section one.
What are required fields?
Required or mandatory fields are form questions
that must be answered by the user
before the form can be submitted.
The opposite of required fields are optional fields.
And this is where users can choose whether to answer
the form questions or not.
It's important to ensure that all users can
identify which fields are required
and which ones are optional.
Developers need to make sure required fields are easily
identifiable.
For two special groups of users, sighted users
and vision-impaired users.
Section two, sighted users.
Sighted users need to be provided
with a visual mechanism the allows them
to identify required fields.
The visual mechanism must not rely on color alone
to identify these required fields.
Some common visual mechanisms include, number one,
the asterisk.
This method involves adding a text-based asterisk symbol
to the label for all required fields.
The mark-up normally involves placing the asterisk
inside a span or an emphasis element.
However, some users don't notice these asterisk symbols,
as they're often very small characters.
Also, using the default setting for most screen readers,
these asterisks will not be announced.
And there are other problems.
Some users may not even understand
what these symbols mean, even if there's a descriptive
key above the form.
This is especially true for some types
of cognitively-impaired and technically-challenged users.
For this reason, the asterisk method is not recommended.
The image method involves adding an image
to the label for all required fields.
In most cases, the image contains an asterisk symbol.
And the image is given an attribute of required.
Now, this method provides a visual icon for sighted uses
and hidden content for vision-impaired users.
However, it has many of the same problems as the previous method
and is, therefore, not recommended.
The most effective method is to add the word Required
to the labels of all required fields.
This content can be placed inside a span or an emphasis
element.
CSS can then be used to differentiate
this word from the rest of the label content.
Now, this method doesn't require a descriptive key
above the form, as the wording is clear.
It's also more intuitive for cognitively-impaired and
technically-challenged users.
If all the fields in or form are required,
a single statement can be added above the form.
There's no need to flag each of the individual fields
as required.
Section three, vision-impaired users.
For vision-impaired users, especially screen reader users,
required fields need to be programmatically defined.
This can be achieved using the HTML5 Boolean
required attribute, which defines
the element as being quite.
Conclusion.
So there you have it, a simple explanation of how
to define required form fields.
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.