Mandatory Fields and Accessibility

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>
ARIA-required attribute
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.

Conclusion

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

4 Comments to "Mandatory Fields and Accessibility"

  1. April 23, 2014 - 1:19 am | Permalink

    Would appreciate your take on client side validation.
    Where and how to place error messages, where to move the focus on error.

    My preference is to dynamically insert the error between the relevant label and input field, then to programmatically move the focus to the error message (through tabindex=”-1″), so that the next tab will land on the relevant input.

  2. vijayendra's Gravatar vijayendra
    April 23, 2014 - 2:25 pm | Permalink

    Thanks for the post it is really helpful.
    I would like to know if we can write label as mandatory firstname for example or use form elements title attribute for indicating same? Considering Style out mandatory will not be a problem if required.

Comments are closed.