What a CVV accessibility test case is
A CVV accessibility test case is a repeatable check that the card security code field can be perceived, operated, and understood by keyboard users, screen reader users, voice input users, and people who zoom or run high contrast mode. The field fails when its name lives only in a placeholder, when it rejects paste, or when its error appears as red text with no programmatic tie to the input. Run the cases below against a staging payment form before release, and record pass or fail for each one.
Prerequisites
- A staging checkout page with a working CVV field and a test card.
- Keyboard only, plus NVDA on Windows or VoiceOver on macOS and iOS.
- Browser accessibility tree inspector, such as Chrome DevTools or the Firefox Accessibility panel.
- WCAG 2.2 Level AA as the pass or fail reference.
Structure and naming
- Open the accessibility tree and confirm the field exposes a name of "Security code" or "CVV", a role of textbox, and the hint text.
- Check that a visible label sits outside the input and is tied to it with a for and id pair, or wraps it.
- Confirm the autocomplete token is cc-csc, so browsers and assistive tech can identify the purpose.
- Confirm the pattern is inputmode="numeric" with a text input type, not type="number", to keep leading zeros and avoid spinner controls.
- Verify the hint states the digit count, for example "3 digits on the back, 4 for American Express".
- Confirm the placeholder is empty or repeats the label, and never replaces it.
Keyboard and focus
- Tab into the field and confirm a visible focus ring that meets contrast requirements.
- Confirm focus does not jump to the CVV field on page load.
- Check that no script auto-advances focus to the next field while the value is still being typed.
- Paste a copied code and confirm the field accepts it without blocking the clipboard.
Errors and status
- Submit an empty field and confirm the error text names the field and the expected format.
- Confirm the error is tied to the input with aria-describedby and announced by the screen reader on submit.
- Confirm the error is not conveyed by color alone and includes an icon or text marker.
- Correct the value and confirm the error clears and the field returns to a valid state without a page reload.
Zoom, contrast, and voice
- Zoom to 200 percent and confirm the field, label, and error stay visible without horizontal scrolling.
- Test at 320 CSS pixels wide and confirm the layout reflows and the field stays usable.
- Switch to forced colors mode and confirm the border, focus ring, and error remain visible.
- Speak the visible label with voice control and confirm the field can be focused by that phrase, which requires matching visible text.
- Confirm a show or hide toggle, if present, is a button with an accessible name and does not expose the value in plain text by default.
Reporting results
Log each case with the browser, assistive technology version, and outcome. A single fail on naming or error announcement blocks the form, because those failures stop screen reader users from completing checkout at all.