What to verify first
A CVV field fails accessibility in three typical ways: a screen reader announces it as an unlabeled edit box, keyboard users cannot reach or leave it, or an error message is never tied to the input. Fix those items before you run a full audit. WCAG 2.2 success criteria 1.3.1, 3.3.1, 3.3.2, and 4.1.2 cover the field and its messages, and 2.5.8 covers the size of its tap target.
Prerequisites
- A staging checkout form and a published sandbox test card from your payment processor.
- NVDA or JAWS on Windows, or VoiceOver on macOS and iOS.
- Chrome DevTools or the Firefox Accessibility Inspector for tree inspection.
- The WCAG 2.2 Level AA checklist open for reference.
How to test the CVV field
- Load the checkout page in staging and enter a published sandbox test card, never a live card number.
- Open the accessibility tree in DevTools and confirm the field exposes a role of textbox, an accessible name, and an autocomplete value of cc-csc.
- Press Tab with the mouse untouched and confirm focus lands on the field in an order that follows the visual layout.
- Type with the keyboard only and confirm the caret appears, digits are accepted, and the field does not force a fixed character count before you can move to the next control.
- Check that the input uses inputmode="numeric" so a numeric keypad appears on touch devices.
- Turn on the screen reader and move into the field. It should announce the label, the security code purpose, and any hint text in one pass.
- Submit the form with the field empty and confirm the error is announced without pulling focus away from the field.
- Submit an invalid code and confirm the message states what is wrong and how to correct it, with the field marked invalid in the accessibility tree.
- Zoom the viewport to 400 percent and confirm the field, its label, and its error text stay readable with no horizontal scrolling.
- Measure the tap target. It must be at least 24 by 24 CSS pixels or meet the spacing exception.
- Enable forced colors or high contrast mode and confirm the border, focus ring, and error state stay distinguishable.
- Paste a code into the field and confirm the paste is not blocked.
- Run an automated scan with axe or Lighthouse and treat every violation reported on the field as a real defect until you prove otherwise.
- Repeat steps 6 through 11 with a mobile screen reader, since touch exploration reports labels and hints differently than desktop.
Common failures
Placeholder text used as the only label vanishes after typing and leaves the field unnamed. A visual asterisk with no programmatic required state is invisible to assistive tech. Prefix icons drawn as background images carry no text alternative. Error text placed in a toast that disappears after two seconds is missed by screen reader users who are still inside the field.
Reporting
Log each defect with the success criterion, the browser and assistive technology versions, and a short recording. Record the expected announcement next to the actual one so a developer can reproduce the defect without a screen reader session.