# Information is conveyed via markup, not just appearance

- **Pattern:** `ab-000111` (`accessibility-wcag.operable.semantic-markup`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000111
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000111)

## Why it matters

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.

## Severity rationale

Medium because color-only information creates silent failures for colorblind users and screen readers, violating WCAG 2.2 SC 1.4.1 at Level A without completely blocking all functionality.

## Remediation

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`.

```tsx
<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.

## Detection

- **ID:** `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:

  ```tsx
  <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>
  )}
  ```

## External references

- wcag 1.3.3
- wcag 1.4.1
- section-508 302.4

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-000111