Required form fields are clearly marked

When required fields are marked only by a red asterisk or red border color, users with color vision deficiencies and screen reader users cannot determine which fields must be filled before submission. WCAG 2.2 SC 3.3.2 (Labels or Instructions) mandates that users receive adequate instructions before encountering a field, and SC 1.3.1 (Info and Relationships) requires that programmatic relationships reflect visual ones. Section 508 2018 Refresh 502.3.3 enforces the same. A user who submits an incomplete form and receives a generic 'form has errors' message has no way to identify which fields they missed. Forms that fail on submission without pre-warning required fields also violate SC 3.3.1 (Error Identification). The downstream impact is user frustration, elevated support tickets, and ADA litigation exposure.

Every required field needs two things: a visible text indicator (not color alone) and a programmatic required or aria-required attribute. Add a legend or footnote explaining what the asterisk means.

<form>
  <p><span aria-hidden="true">*</span> indicates required field</p>

  <div>
    <label htmlFor="full-name">
      Full Name <span aria-label="required">*</span>
    </label>
    <input
      id="full-name"
      type="text"
      required
      aria-required="true"
    />
  </div>

  <div>
    {/* Optional field — no asterisk, no required attribute */}
    <label htmlFor="company">Company</label>
    <input id="company" type="text" />
  </div>
</form>

Do not rely on color: red alone to distinguish required from optional. The required HTML attribute enables browser-native validation; aria-required="true" is additionally needed for custom validation flows that suppress native validation.