Almost every website will have a form page. Contact form, booking appointments, booking tickets etc are some examples. In every form we observe mandatory fields.
When a mandatory field is available in the form, it means user should fill that field without fail. Leaving the mandatory fields will cause in non submission of the form.
How to identify a mandatory field?
There are many techniques that are followed by content authors to let the users identify a mandatory field. Identifying a mandatory field causes many accessibility problems. Below are few ways how a mandatory field can be identified and how does it impact accessibility.
Fields marked with red are mandatory
Content authors provide the mandatory fields in a color to differentiate them from optional fields. This information will be well intimated to the userâ€™s right before the form such as “Fields marked with red are mandatory”.
When accessibility layer is applied to this scenario, blind users who use screen reader cannot differentiate the fields with red. WCAG 2.0 SC 1.4.1 Use of Color also states that color should not be the only means of conveying the information, indicating an action or prompting a response.
Fields marked with * are mandatory
Using an asterisk (*) symbol content authors notify mandatory field. This is said to be one of the accessible modes of identifying a mandatory field, however this method also will be a problem with screen readers in certain times. Almost all screen readers have an option to set the punctuation levels to “None”, “Some”, “Most” and “All”. Users will rarely set the punctuation level to “None” and “All”. The remaining two are “Some” and “Most”. When the punctuation level is set to “Most” the asterisk symbol is read-out by the screen reader, but in this case screen reader reads most of the unwanted punctuations such as “:”, “-” used in the content so screen reader users tend to set the punctuation level to “some” When the punctuation level is set to “some” the screen reader ignores the * symbol.
To conclude screen reader recognizes “*” symbol only when the punctuation level is set to “Most” or “All”.
Programmatically recognizing mandatory fields
Following are few ways to programmatically define a mandatory field.
HTML 5 required attribute.
Syntax: <input type=email required>
Syntax: <input type=”email” aria-required=”true” >
Though ARIA-required and HTML5 required attribute determines the mandatory field it depends how many screen readers and which browsers support them.
- Provide a combination of all the three techniques to minimize the chances of missing the mandatory fields.
- Provide clear instruction to the user before the form mentioning the way to recognize the mandatory field.
- Provide a specific error message when the user is unable to fill the mandatory field such as “(error) Email field is mandatory” instead of a generic error message for all the mandatory fields.