Transcript
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.