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

What the screen reader announces:

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

What the screen reader announces:

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