Required Fields — Indicating Mandatory Input Accessibly

In this tutorial, you will learn about Required Fields. We cover key concepts, practical examples, and best practices to help you master this topic.

Required fields must be communicated to all users through both visual and programmatic indicators using aria-required and clear text labels.

What You'll Learn

How to mark required fields in HTML, how screen readers announce required states, and how to design visual indicators that work for color-blind users.

Why It Matters

Users must know which fields are mandatory before submitting. Without clear indicators, they may miss required fields and face errors, or spend time on optional fields unnecessarily.

Real-World Use

A job application form has 10 required fields and 5 optional fields. Each required field has a visible "(required)" text and aria-required="true" so screen readers announce "Email address, required, edit."

Marking Required Fields

<!-- aria-required + visible text -->
<label for="email">
  Email address <span aria-hidden="true">*</span>
  <span class="sr-only">(required)</span>
</label>
<input type="email" id="email" name="email" required aria-required="true">

<!-- Using a legend for group-level required info -->
<fieldset>
  <legend>
    Contact information
    <span class="sr-only">All fields are required</span>
  </legend>
  ...
</fieldset>

CSS for Required Indicators

/* Visually hidden but accessible text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Styling the asterisk */
[aria-required="true"] + label .required-asterisk {
  color: #c00;
}

Optional Fields

<label for="phone">Phone number <span class="sr-only">(optional)</span></label>
<input type="tel" id="phone" name="phone">

Common Mistakes

1. Using only color to indicate required

Red asterisks are invisible to color-blind users. Always pair with text or aria-required.

2. Relying solely on the required attribute

The HTML required attribute sets aria-required implicitly, but always set both for older browser support.

3. Not marking optional fields

If most fields are required, mark the few optional ones instead. This reduces visual noise.

4. Asterisk without explanation at form top

If using asterisks, explain their meaning at the top of the form with text like "* indicates required field."

5. Forgetting aria-required on custom controls

Custom select, date picker, or autocomplete widgets need explicit aria-required="true".

Practice Questions

1. What attribute programmatically marks a field as required? aria-required="true" tells screen readers that a field is mandatory.

2. Why should you not rely on the asterisk alone? Color-blind users may not see the red asterisk. Screen readers also do not announce visual characters unless they are in the accessible name.

3. What is the best practice for optional fields? Use text like "(optional)" in the label or use aria-label to indicate the field is not required.

Challenge: Create a form with 5 required and 3 optional fields. Use aria-required, visible text, and sr-only text to ensure every user knows which fields are mandatory.

FAQ

Mini Project

Take an existing form and add required field indicators using both visual text and aria-required. Ensure the top of the form explains your indicator convention. Test with a screen reader.

What's Next

Learn how to handle Error Messages with aria-describedby and aria-invalid to guide users through correcting their input.