Required Field Indicators

Required field indicators communicate which form fields must be completed before submission. Accessible indicators combine visual markers with programmatic attributes to ensure all users understand which fields are mandatory.

What Are Required Field Indicators

Required field indicators are visual and programmatic markers that identify mandatory form fields. Common visual indicators include asterisks (*), “(required)” text, or distinct styling. Programmatic indicators include the HTML required attribute and ARIA aria-required attribute.

WCAG Success Criterion 3.3.2 (Labels or Instructions) requires that forms provide labels or instructions when content requires user input. Identifying required fields is part of this requirement. Users need to know which fields they must complete to successfully submit the form.

Design systems standardize required field indication across all form components. Consistent patterns help users learn what markers mean, reducing cognitive load when completing forms. Component APIs typically include a required prop that triggers both visual and programmatic indicators.

How Required Field Indicators Work

Visual indicators must be explained before users encounter them. A legend at the form’s beginning stating “Required fields are marked with *” helps users understand the convention. Without explanation, asterisks or other symbols may not communicate their meaning to all users.

The HTML required attribute provides native browser validation and communicates requirement to assistive technologies. Screen readers typically announce “required” when focusing a field with this attribute. Browser validation prevents form submission when required fields are empty.

The aria-required=“true” attribute communicates requirement to assistive technologies without triggering native browser validation. This suits custom validation approaches where native validation messages would conflict with design system error patterns.

Positioning of visual indicators should be consistent. Placing asterisks after the label text or at the label’s beginning both work if consistent throughout the form. Inconsistent positioning increases cognitive load.

The visual indicator should have adequate contrast and size. A small, low-contrast asterisk may be missed. Ensuring the indicator is perceivable for users with low vision requires attention to these details.

Key Considerations

• Explain indicator meaning before users encounter required fields
• Use the required attribute for native validation and screen reader announcement
• Position indicators consistently (before or after label, but always the same)
• Ensure indicators have adequate color contrast and size
• Consider marking optional fields instead when most fields are required
• Avoid relying solely on color to indicate requirement
• Test with screen readers to verify announcements include required state

Common Questions

Should optional fields be marked instead of required fields?

When most form fields are required, marking the few optional fields may be clearer than marking the many required ones. “All fields required unless marked optional” reduces visual clutter and cognitive load.

Either approach works if consistently applied and clearly explained. The key is helping users understand which fields need completion. When roughly half the fields are required, marking required fields remains the clearer approach.

How should required indicators work with grouped fields?

Field groups like address components or date parts need careful consideration. If the group as a whole is required but individual fields are not independently required, the fieldset legend should indicate requirement.

If individual fields within a group are independently required, each should have its own indicator. The pattern depends on validation logic: does submitting require all address fields or can some be empty?

Is color alone acceptable for required field indication?

Color alone fails WCAG requirements because users who cannot perceive color (due to color blindness or screen reader use) would miss the information. Required field indication needs text or symbolic markers alongside any color difference.

Red asterisks are common, but the asterisk symbol provides the information, not the red color. Ensure the asterisk remains visible when color is removed or perceived differently.

Summary

Required field indicators combine visual markers like asterisks with programmatic attributes like required or aria-required to communicate mandatory fields. Clear explanation of indicator meaning, consistent positioning, and adequate visual prominence ensure all users can identify which fields they must complete.