The field is marked as required, but this is misleading because the field is in fact optional.

Link to The field is marked as required, but this is misleading because the field is in fact optional. copied to clipboard
Rule ID:
optional-marked-required
User Impact:
Moderate
WCAG:
3.3.2.c

Rule

The form validation process MUST include an error message explaining that a field is required if the field isn't identified as required both visually and programmatically in the form's initial state.

Background

Filling out forms correctly can be one of the more time-consuming and frustrating online user experiences, and it can be even more challenging for people with disabilities. The single easiest way to prevent user errors is by providing clear labels and instructions that are available to everyone at all times. Labels and instructions should:

  1. be clear and informative,
  2. disclose any constraints such as required data formats or ranges, and
  3. identify required fields.

Well-designed labels and instructions provide enough information so people can fill out forms without undue confusion or errors.

Form fields that are required must be indicated using aria-required="true".

Additionally, form fields also must be marked as required visually, through its label, its form-level instructions, or an error message that specifically indicates which field is required.

Finally, fields that are not required must not be marked as such visually or programmatically.

Code Examples

Good Examples:

Fields that are required are marked both visually and programmatically:

<p>Fields with asterisks (*) are required.</p>
<p>
  <label for="firstname">First Name:*</label>
  <input id="firstname" name="firstname" type="text" aria-required="true">
</p>
<p>
  <label for="lastname">Last Name:*</label>
  <input id="lastname" name="lastname" type="text" aria-required="true">
</p>
<p>
  <label for="age">Age:</label> 
  <input id="age" name="age" type="text">
</p>

Failure Examples:

Field is marked required visually, but lacks aria-required="true":

<p>Fields with asterisks (*) are required.</p>
<p>
  <label for="firstname">First Name:*</label>
  <input id="firstname" name="firstname" type="text">
</p>
<p>
  <label for="lastname">Last Name:*</label>
  <input id="lastname" name="lastname" type="text">
</p>
<p>
  <label for="age">Age:</label>
  <input id="age" name="age" type="text">
</p>

Field that is optional is marked required visually:

<p>Fields with asterisks (*) are required.</p>
<p>
  <label for="firstname">First Name:*</label>
  <input id="firstname" name="firstname" type="text" aria-required="true">
</p>
<p>
  <label for="lastname">Last Name:*</label>
  <input id="lastname" name="lastname" type="text" aria-required="true">
</p>
<p>
  <label for="age">Age:*</label>
  <input id="age" name="age" type="text">
</p>

How To Fix

Fix this issue by using ONE OR MORE of the following techniques:

  • Use the field label or legend to indicate in text form that a field is required,
    AND
    Use aria-required="true" to programmatically indicate a field is required.
  • Provide text instructions at the beginning of the form or set of fields that describes which fields are required (or optional).
    AND
    Use aria-required="true" to programmatically indicate a field is required.
  • Provide an error message that specifically indicates each of the required field(s) that was/were not completed.
    AND
    Use aria-required="true" to programmatically indicate a field is required.

Don't do this:

  • Mark optional fields as required.
  • Depend only on visual indicators, such as the color of the label or an asterisk, to indicate a field is required.

References