Mandatory Form Fields Specification

Web [Pattern] Mandatory Form Fields
1

Mandatory Form Fields Validation

Introduction

This work aims to improve accessibility and resolve inconsistencies around field validation. The way we indicate mandatory fields and the way we deal with erroneous submissions can be made more usable for users with or without assistive technology (AT).

  • Investigation on form labels, mandatory field and error messages
  • Validation pattern accessibility requirement
  • Field validation messages/errors are inconspicuous and easy to miss

The look

Short form example

Default state:
short1

With errors:
short2

Long form example

Default state:
long1

With errors:

long2
long2592×1376 35.7 KB

Behaviour:

  1. Required indicator is now in the same colour as the text
  2. Required indicator precedes the field label
  3. On a failed submission, the error field is re-labeled
  4. On a failed submission, the form displays an error
  5. On a failed submission, a link to the erroneous field is present after the error message, it is not displayed but relevant to screen readers
  6. The error icon is moved to the form-level error
  7. Put a link to the errored out field under the button, so screen readers can jump to it - this link can be invisible to sighted users but visible to AT with an ARIA label

Issues Resolved:

  1. Making the required indicator text-coloured resolves the “red is an error” issue
  2. The required asterisk precedes the field label to make mandatory fields easier to scan and identify, both for those using assistive technology and without.
  3. Identifying the erroneous field is inline with the WCAG 2.1 guidance
  4. Identifying the error at the form level is inline with the WCAG 2.1 guidance
  5. Moving the error icon from the field to the form level resolves the clash with both the show/hide icon and third-party password managers

Accessibility

The main WCAG technique referred to is Providing text descriptions to identify required fields that were not completed.

This technique relates to:

From the technique:

The objective of this technique is to notify the user when a field that must be completed has not been completed. When users fail to provide input for any mandatory form fields, information is provided in text to enable the users to identify which fields were omitted.

Tests

Procedure

  1. Fill out a form, deliberately leaving one or more required (mandatory) fields blank, and submit it.
  2. Check that a text description is provided identifying the mandatory field(s) that was not completed.
  3. Check that other data previously entered by the user is re-displayed, unless the data is in a security related field where it would be inappropriate to retain the data for re-display (e.g. password).

Expected Results

  • #2 and #3 are true