A CVV accessibility test checks one thing: can a keyboard user, a screen reader user, and a voice control user find the security code field, understand what it wants, and complete it without help? The field passes when it has a programmatic label, an autocomplete value of cc-csc, a numeric keypad on mobile, an announced error message, and no block on paste or autofill.

more on this topic

What the test covers

A CVV field is a three or four digit input that sits next to the card number on a checkout form. Most failures come from the same short list: a placeholder used instead of a label, a field that rejects pasted digits, and an error message that shows in red text but never reaches the screen reader. The procedure below checks each of these in order.

read more

Prerequisites

  • A staging checkout page with a test card number, never a live card
  • A screen reader: NVDA or JAWS on Windows, VoiceOver on macOS or iOS
  • A keyboard with the browser visible on screen
  • A mobile device or an emulator for the numeric keypad check
  • A results sheet with one row per assistive technology

How to test the CVV field

  1. Load the checkout page and press Tab until focus reaches the CVV field.
  2. Confirm the focus ring is visible against the field border and the surrounding page.
  3. Start the screen reader and Tab back to the field.
  4. Write down the exact announcement, including the label, the hint text, and the input role.
  5. Open the browser inspector and check the field has an associated <label> or an aria-label that says "security code" in plain words.
  6. Verify the autocomplete attribute is set to cc-csc.
  7. Verify the inputmode attribute is set to numeric.
  8. Type a two-digit code and submit the form.
  9. Confirm the screen reader announces the error text and that the error is tied to the field through aria-describedby.
  10. Copy a valid three-digit code from a text editor and paste it into the field.
  11. Repeat the paste test with the browser password manager or card autofill.
  12. Set page zoom to 200 percent and check the label, field, and error text stay on screen.
  13. Switch to voice control and say the visible label out loud.
  14. Confirm the field takes focus and the cursor lands inside it.
  15. Log the result for each assistive technology on the results sheet.

Failures to log

  • The label exists only as a placeholder and vanishes once the user types
  • The field announces as "edit text" with no name
  • Paste is blocked by a script on the input
  • The error message renders but sits outside the field's description
  • The field accepts letters on mobile because the keypad type is missing
  • The card brand icon covers the input and hides the caret

Reporting

Report each failure with the assistive technology, browser, and step number. A finding reads "NVDA 2024.1 with Firefox: CVV field announces as edit text with no accessible name, step 4." That phrasing gives a developer enough detail to fix the field without a second review pass.

cvv test accessibility v2