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.

• ID: accessibility-wcag.operable.semantic-markup

• Severity: medium

• What to look for: Enumerate every relevant item. Check that information conveyed by color, shape, size, or position is also expressed in HTML or ARIA. For example, required fields marked only with red asterisks, or status conveyed only by background color.

• Pass criteria: At least 1 of the following conditions is met. All information is conveyed in markup. Color is not the only indicator. Required fields have aria-required="true" or are within a <fieldset> with legend.

• Fail criteria: Important information is conveyed only through CSS styling or color with no markup equivalent.

• Skip (N/A) when: Never — semantic markup applies to all content.

• Detail on fail: Example: "Required fields marked only with red color and asterisk. No aria-required attribute. Form field errors conveyed only by red border"

• Remediation: Use semantic markup to convey information:

  <label htmlFor="email">
    Email <span aria-label="required">*</span>
  </label>
  <input id="email" type="email" aria-required="true" />
  
  {error && (
    <span role="alert" className="text-red-600">
      Email is required
    </span>
  )}