Information is conveyed via markup, not just appearance

When information is conveyed solely through color, shape, or position — a red asterisk for required fields, a green border for valid inputs, or an icon without text — users with color blindness or those using high-contrast mode miss it entirely. WCAG 2.2 SC 1.3.3 (Sensory Characteristics) and SC 1.4.1 (Use of Color) are both Level A requirements. Form field errors that appear only as a red border leave screen reader users with no feedback at all.

Pair every color-based signal with a text or markup equivalent. For required fields, use aria-required; for errors, use role="alert" with a text message associated via aria-describedby.

<div>
  <label htmlFor="phone">
    Phone number
    <span className="text-red-600" aria-hidden="true"> *</span>
    <span className="sr-only">(required)</span>
  </label>
  <input
    id="phone"
    type="tel"
    aria-required="true"
    aria-describedby={phoneError ? 'phone-error' : undefined}
    aria-invalid={!!phoneError}
  />
  {phoneError && (
    <span id="phone-error" role="alert" className="text-red-600">
      {phoneError}
    </span>
  )}
</div>

Search the codebase for any status conveyed only by a CSS class like border-red-500 or text-green-600 without a corresponding text or ARIA signal.