CVV test accessibility v3 is a sign-off checklist for the card security code field. You are checking one thing: can every user enter those three or four digits without guessing, and can they recover when something goes wrong. The field is tiny, yet it fails more often than the card number because it is numeric, short, often masked, and tied to a physical card the user may not be holding.
What the v3 pass covers
Three layers: semantics, input behavior, and error recovery. Semantics means the field has a real label and a hint that names the card and the side. Input behavior means keyboards, autofill, and paste all work. Error recovery means the message says what to fix and lands where assistive tech will read it.
CVV Test Accessibility v9: A Comprehensive Guide
Label and hint first
I look for a visible label that says "Security code" or "CVV," not a placeholder. Placeholders vanish on focus and leave screen reader users with an empty box. Pair the label with a short hint: "3 digits on the back of your Visa, 4 on the front of an Amex." Connect the hint with aria-describedby so it is announced with the field, not just seen.
Do not put the hint inside the label. A label that reads "CVV 3 digits on the back" turns into a long announcement every time the field gets focus.
Keyboard and mobile input
- inputmode="numeric" so phones open the number pad. Avoid type="number", which adds spinners and can mangle leading zeros.
- maxlength of 4 and no truncation logic that blocks Amex. Accept 3 and 4 digits.
- Paste stays enabled. Blocking paste breaks password managers and anyone using a clipboard.
- Tab order: the CVV follows the card number and expiry, then the submit button. No focus traps.
- Visible focus ring with enough contrast. Do not remove the outline without a replacement.
Autofill and password managers
Set autocomplete="cc-csc" on the field. Browsers use it to fill the code from a saved card, and testing tools flag it when missing. If the field sits in a form with cc-number and cc-exp, keep all three names consistent. A CVV field with autocomplete="off" is a common audit failure, and it costs users real time on mobile.
Errors and help text
Submit an empty field and a wrong-length value. The error should name the field, say the expected length, and stay visible until fixed. Tie the message to the input with aria-describedby and move focus to the first invalid field, not the top of the page. Color alone is not enough. Add text and an icon with an accessible name.
One more test: enter a code, submit, and fail. The field should keep the value so the user can correct one digit. Clearing it forces a full retype and is a quiet accessibility bug.
Quick pass or fail list
- Visible label plus programmatic label.
- Hint announced via aria-describedby.
- Numeric keypad on mobile, paste allowed.
- autocomplete="cc-csc" present.
- Error text linked to the field and focus managed.
- Value preserved after a failed submit.
Version 3 of this checklist adds the autofill and value-preservation checks, because those two failures show up in audits but rarely in manual keyboard tests.