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.

• ID: accessibility-basics.semantic-structure-aria.required-fields-marked

• Severity: critical

• What to look for: Enumerate every relevant item. Check all form inputs marked as required. Look for both visual indicators (asterisk, "required" text) and programmatic indicators (required attribute, aria-required="true"). A form is accessible only if users know a field is required before submitting.

• Pass criteria: At least 1 of the following conditions is met. Every required input has BOTH a visible text indicator (e.g., "(Required)" or "*") AND a programmatic indicator (required attribute or aria-required="true"). Before evaluating, extract and quote the relevant configuration or code patterns found. Report the count of items checked even on pass.

• Fail criteria: Any required input lacks a visual indicator, or relies only on visual styling (e.g., color alone, or an asterisk without explanation), or lacks an aria-required attribute.

• Do NOT pass when: The item exists only as a placeholder, stub, or TODO comment — partial implementation does not count as passing.

• Skip (N/A) when: Never — all required fields must be marked.

• Cross-reference: For deployment and infrastructure concerns, the Deployment Readiness audit covers production configuration.

• Detail on fail: List required fields that are inadequately marked. Example: "Required fields marked with red asterisks only. No aria-required attribute on inputs. No '(Required)' text indicator."

• Remediation: Mark required fields both visually and programmatically:

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