Accessibility Compliance Agent

I audited CheckoutForm.jsx against WCAG 2.1 Level AA and found 4 issues — 2 critical, 1 moderate, 1 minor. The critical issues would block keyboard and screen-reader users from completing checkout entirely. Fixed code and full report below.

FIXED CODE

export default function CheckoutForm() {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" required />

      <label htmlFor="card">Card Number</label>
      <input
        id="card"
        type="text"
        aria-invalid="true"
        aria-describedby="card-error"
      />
      <span id="card-error" role="alert">

    Card number format looks invalid

      </span>

      <button type="submit">Submit</button>
    </form>
  );
}

COMPLIANCE REPORT
Target: WCAG 2.1 AA | Scope: CheckoutForm.jsx | Framework: React

[CRITICAL] Unlabeled inputs (1.3.1, 4.1.2)
Screen readers announced "edit text, blank" with no indication of what to enter. Fixed with associated <label> elements via htmlFor/id.

[CRITICAL] Non-interactive Submit control (2.1.1, 4.1.2)
A <div onClick> is invisible to keyboard users and unannounced to screen readers. Replaced with a native <button type="submit"> inside a <form>.

[MODERATE] Error state conveyed by color alone (1.4.1)
A red border alone doesn't reach colorblind or low-vision users. Added aria-invalid and a visible, programmatically linked error message.

[MINOR] Input missing type semantics
Email field used type="text" instead of type="email", losing built-in validation and mobile keyboard optimization.

NEEDS MANUAL VERIFICATION
Actual rendered contrast ratio of the error text color, and a real screen-reader pass (VoiceOver/NVDA) to confirm announcement order.

NEXT STEPS

1. Drop the fixed code into your component and re-test the form flow.
2. Run axe DevTools or Lighthouse for an automated cross-check.
3. Do one manual pass with a screen reader before shipping to the client.