WCAG 3.2.4 — Consistent Identification

What this requires

Components that have the same functionality within a set of pages are identified consistently. "Identified" means the accessible name (aria-label, button text, icon meaning) — components that do the same thing should have the same label.

How AI coding tools fail this

When asked to "give this button a more friendly label" or "use a different icon here", AI tools change the identity of a single component without updating the others that share its function. The "Save" button on one page becomes "Apply" on another, "Update" on a third.

The second pattern: icon inconsistency. A close button uses an X icon in one component, a chevron in another, a trash can in a third — all of them dismissing a thing. The visual vocabulary splinters.

The third: language drift across the site. The home page says "Sign in", the docs say "Log in", the marketing site says "Get started". Three labels for the same destination.

Failing examples

Inconsistent identification of the same function:

// header.tsx
<button>Sign in</button>

// pricing.tsx
<button>Log in</button>

// app/page.tsx
<button>Get started</button>

Inconsistent icons for the same action:

// modal.tsx
<button aria-label="Close"><XIcon /></button>

// drawer.tsx
<button aria-label="Close"><ChevronRightIcon /></button>

Passing examples

A shared component for shared functionality:

// design-system/sign-in-button.tsx
export function SignInButton({ ...props }) {
  return <button {...props}>Sign in</button>;
}

// Used everywhere:
import { SignInButton } from "@/components/sign-in-button";

A shared close component with a single icon and label:

// design-system/close-button.tsx
export function CloseButton({ onClose, label = "Close" }) {
  return (
    <button onClick={onClose} aria-label={label}>
      <XIcon aria-hidden="true" />
    </button>
  );
}

Edge cases

Same function matters more than "same look". A heart icon for "favourite" can be the same as a heart icon for "save" only if they are genuinely the same action.
Locale variations are exempt — different translations are inherent to localisation.
Visual emphasis (a primary "Sign in" button vs. a tertiary "Sign in" link) can differ visually as long as the label is consistent.
Different verbs for different actions is the right call — "Save" and "Apply" can legitimately differ if they do different things.
Design-system enforcement is the pragmatic answer: same data pattern, same shared component, identified once.

How Jeikin handles this

The scanner clusters buttons and links across pages by accessible name and by inferred function (target URL, action verb), and flags clusters with multiple labels. The dashboard records each cluster and lets the reviewer mark the canonical label, with the others queued for fixing.

References

W3C — Understanding 3.2.4 Consistent Identification (opens in new tab)