visual-required-missing

Description

There must be a visual indication that a field is required. This ensures that all users, including those with visual or cognitive disabilities, can easily identify which fields must be completed. The absence of such visual cues can lead to confusion and errors, particularly for users who rely on visual indicators to understand form requirements.

The visual-required-missing rule aligns with WCAG Success Criterion 3.3.2 (Labels or Instructions), which requires that labels or instructions are provided when content requires user input.

Examples

In the following example, the required fields do not have any visual indication, such as an asterisk (*) or text label, to signify that they are mandatory. This violates the visual-required-missing rule.

In the following corrected example, visual indicators (asterisks) are added to the labels of required fields, making it clear to users which fields must be filled.

How to fix?

To fix violations of the visual-required-missing rule, follow these steps:

1. Identify all required fields in your forms.
2. Add a visual indicator (e.g., an asterisk, text label, or icon) to the labels of these fields. Add clear instructions about required fields at the top of the form.
3. Ensure that the visual indicator is accessible to all users, including those using screen readers, by providing additional context or aria-labels if necessary.

Reference

WCAG Success Criterion 3.3.2: Labels or Instructions