What CVV accessibility testing covers

A CVV test for accessibility checks whether the card security code field can be used by people who navigate with a keyboard, listen with a screen reader, dictate with voice control, or tap on a phone keypad. The field must have a programmatic name, a reachable focus state, an input mode that matches the expected data, and an error message that explains how to fix a mistake. Testing happens at three levels: the markup, the interaction, and the assistive technology. Passing one level does not imply passing the others.

Prerequisites

  • A staging checkout page where the CVV field renders
  • A screen reader: NVDA with Firefox on Windows, or VoiceOver with Safari on macOS and iOS
  • Keyboard only access, with the mouse unplugged
  • WCAG 2.2 Level AA success criteria list
  • An automated scanner such as axe DevTools or Accessibility Insights

How to test the CVV field

  1. Open the checkout page and locate the CVV field on screen.
  2. Confirm a visible text label sits next to the field, such as "Security code" or "CVV".
  3. Inspect the field in developer tools and verify the label is bound with a for attribute or aria-labelledby, not only with placeholder text.
  4. Verify the field carries autocomplete="cc-csc" so browsers and assistive tech identify it.
  5. Verify inputmode="numeric" brings up a number pad on mobile.
  6. Unplug the mouse, press Tab from the page top, and confirm focus reaches the CVV field in the expected order.
  7. Check the focus indicator is visible against the surrounding background.
  8. Type letters into the field and confirm an error appears that names the field and states the accepted format.
  9. Check the error is exposed to assistive tech through aria-describedby or a live region, and is not signaled by color alone.
  10. Turn on the screen reader and Tab to the field, then confirm it announces the label, the role of text input, the required state, and any hint text.
  11. Type a wrong length code and confirm the screen reader announces the error without moving focus away.
  12. Zoom the page to 200 percent and 400 percent and confirm the field and its label stay visible without clipping.
  13. Measure text contrast at 4.5 to 1 and input border contrast at 3 to 1.
  14. Measure the touch target and confirm it reaches at least 24 by 24 CSS pixels.
  15. Leave the page idle past the session limit and confirm the timeout can be extended or turned off.
  16. Confirm paste and password manager autofill work, and that no puzzle or memory task blocks entry.
  17. Repeat the keyboard and screen reader pass with voice control software.
  18. Run the automated scanner and review each reported item against the manual results.

Common CVV field failures

  • Placeholder text used as the only label, which disappears on input
  • Labels placed visually but never bound to the input element
  • Numeric keypad missing on mobile because the input type or input mode is wrong
  • Error text styled in red with no icon, text cue, or programmatic link
  • Focus trapped inside a card number iframe so the CVV field is unreachable
  • Input masking that rewrites characters and breaks screen reader announcements
  • Session timers that expire mid entry with no warning and no extension

Reporting results

Log each failure with the success criterion number, the browser and assistive technology pair tested, and a short reproduction path. A finding that names only the visual symptom cannot be verified by a developer. Note the pass or fail state for every step in the list so a later regression test can repeat the same sequence.