WCAG 2.0 has several recommendation on how to indicate and clearly identify required fields on a form. Let’s take a look at some of the recommendations:

Required form fields example 1

Technique:

• The required property is indicated by an asterisk placed next to the label element
• Aria tag on form controls: aria-required=”true”

Required form fields example 2

Technique:

• The required property is indicated by the word “required” placed next to the label element

Required form fields example 3

Technique:

• Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content:before.
• Label tag includes: data-required=”true”
• Form controls includes: data-required=”true”

Required form fields example 4

Technique:

• Aria tag on form controls: aria-required=”true” and aria-label=”Test”
• The required property is indicated by the word “required” placed next to the label element

What is a better or preferred solution? I have met with a screen reader user and have the user walk through these examples using JAWS. Here are the feedback:

1. It’s better to indicate “required” rather than “optional” as it’s easier for the brain to process.
2. Using “aria-required” is the best way for screen reader users to know the field is a required field.
3. If “aria-required” tag is used, there may not be the need to indicate “required” label.