Required Fields & Grouping

Overview

Required fields and grouped controls are two of the most frequently broken patterns in forms. A red asterisk alone is meaningless to screen reader users and may be invisible to users with color vision deficiencies. Without the required attribute, assistive technology cannot convey that a field must be filled. Similarly, radio buttons and checkboxes that lack a <fieldset> and <legend> are announced without the context of the question they answer — a user hears “Yes, radio button” but never learns what they are saying “Yes” to.

WCAG Criteria:

• 1.3.1 Info and Relationships  — required state and grouping relationships must be programmatically determinable
• 3.3.2 Labels or Instructions  — instructions for required fields must be provided
• 1.4.1 Use of Color  — color must not be the only visual means of conveying required status

Key requirements:

• Use the required attribute (or aria-required="true") on required fields
• Include “(required)” text in or near the label — do not rely on a visual asterisk alone
• Provide an explanation of asterisk convention at the top of the form: “Fields marked with * are required”
• Never use color alone to indicate required status
• Group related radio buttons and checkboxes with <fieldset> and <legend>
• Keep <legend> text concise — it is prepended to every control label within the group

Required Fields

<!-- Red asterisk only — no required attribute, no explanation -->
<form>
  <label for="required-bad-name">
    Name <span style="color:red">*</span>
  </label>
  <input id="required-bad-name" type="text" />
 
  <label for="required-bad-email">
    Email <span style="color:red">*</span>
  </label>
  <input id="required-bad-email" type="text" />
 
  <button type="submit">Submit</button>
</form>

<form>
  <p>Fields marked with * are required.</p>
 
  <label for="required-good-name">
    Name <span aria-hidden="true">*</span> (required)
  </label>
  <input
    id="required-good-name"
    type="text"
    required
    autocomplete="name"
  />
 
  <label for="required-good-email">
    Email <span aria-hidden="true">*</span> (required)
  </label>
  <input
    id="required-good-email"
    type="email"
    required
    autocomplete="email"
  />
 
  <button type="submit">Submit</button>
</form>

What’s wrong with asterisk-only required indicators?

• The red asterisk is a visual convention that screen readers may announce as “star” with no meaning
• Without the required attribute, assistive technology does not know the field is mandatory
• Using red color alone to signal “required” violates WCAG 1.4.1 (Use of Color)
• No explanation text tells users what the asterisk means
• Without type="email", input validation and mobile keyboard optimization are lost

Predicted semantic summary (exact output varies):

Fieldset Grouping

<!-- No fieldset — radios lack group context -->
<form>
  <p>Do you agree to the terms?</p>
  <input type="radio" name="agree" id="bad-yes" value="yes" />
  <label for="bad-yes">Yes</label>
  <input type="radio" name="agree" id="bad-no" value="no" />
  <label for="bad-no">No</label>
</form>

<form>
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <input
      type="radio"
      name="agree"
      id="good-yes"
      value="yes"
      required
    />
    <label for="good-yes">Yes</label>
    <input
      type="radio"
      name="agree"
      id="good-no"
      value="no"
    />
    <label for="good-no">No</label>
  </fieldset>
</form>

What’s wrong without fieldset and legend?

• The question “Do you agree to the terms?” is a visual <p> with no programmatic relationship to the radio buttons
• A screen reader user focusing the first radio hears only “Yes, radio button” — they never learn what question they are answering
• Without <fieldset> and <legend>, each radio is an isolated control with no group context
• The required attribute is missing, so the form can be submitted without a selection

Predicted semantic summary (exact output varies):

State the convention once: for example, “All fields are required unless marked optional,” then visibly mark optional fields. Do not rely on color or an unexplained asterisk. Native required provides constraint validation for supported controls; aria-required communicates a state but does not add validation. For checkbox and radio groups, put the requirement on the group in a way supported by the implementation, identify group errors in text, and associate them with the fieldset or its controls.

Resources

• WAI Tutorial — Grouping Controls 
• WAI Tutorial — Required Fields 
• MDN — <fieldset> element
• MDN — required attribute
• WCAG 1.3.1 — Info and Relationships 
• WCAG 3.3.2 — Labels or Instructions 
• WCAG 1.4.1 — Use of Color