Enforce Accessibility Standards (WCAG 2.1 AA)

Catches missing alt text, skipped heading levels, unlabeled icon buttons, click handlers on divs, and keyboard gaps that break WCAG 2.1 AA in UI code.

Catch this in your code

What it flags

Flaggedcomponents/product-card.tsx

export function ProductCard({ product, onAddToCart }: ProductCardProps) {
  return (
    <article className="product-card">
      <img src={product.imageUrl} />
      <h3>{product.name}</h3>
      <p>{product.formattedPrice}</p>
      {/* Mouse-only control with no accessible name */}
      <div className="icon-button" onClick={() => onAddToCart(product.id)}>
        <CartIcon />
      </div>
    </article>
  );
}

Passescomponents/product-card.tsx

export function ProductCard({ product, onAddToCart }: ProductCardProps) {
  return (
    <article className="product-card">
      <img src={product.imageUrl} alt={product.imageAlt} />
      <h3>{product.name}</h3>
      <p>{product.formattedPrice}</p>
      <button
        type="button"
        className="icon-button"
        aria-label={`Add ${product.name} to cart`}
        onClick={() => onAddToCart(product.id)}
      >
        <CartIcon aria-hidden="true" />
      </button>
    </article>
  );
}

Why it matters

Accessibility bugs are invisible to the person who writes them: a clickable div works with a mouse, and an icon button without a label looks fine on screen. For keyboard and screen reader users, the same control cannot be reached or has no name, which blocks the task outright. WCAG 2.1 AA is also the conformance level that many accessibility regulations and procurement contracts reference, so these gaps carry legal and sales risk as well.

Agent instructions

cubic checks every pull request against these instructions. Paste them into AGENTS.md or Cursor rules and your AI coding tool follows them while it writes code.

AGENTS.md

Add this section to AGENTS.md at the repository root. Codex, Cursor, and other AI coding tools read it.

## Enforce Accessibility Standards (WCAG 2.1 AA)

Check for proper alt text on images, logical heading hierarchy (one h1, no skipped levels), ARIA attributes on interactive elements, keyboard navigation support, and screen reader compatibility. Ensure all UI components meet WCAG 2.1 AA standards.

Checks every changed file.

Included in the React and Next.js code review standards.

Run this agent on every pull request

cubic reviews every pull request against the agents you turn on and comments on the lines that break them.

Catch this in your code