The Payment Method Selector Nobody Can Name
A row of card logos that acts as a radio group, with no fieldset, no legend, and no accessible name, fails WCAG 1.3.1 and 4.1.2 at the exact moment a shopper is about to pay.
A shopper reaches the payment step and sees four card logos: Visa, Mastercard, Amex, PayPal. She clicks one and the form below changes. A screen reader user tabs through the same step and hears radio button, not checked, four times, with no group name and no label saying what the group is for. She has no way to know these four buttons are payment methods, or which one she just picked.
Payment selectors fail this way because they are built as images first and inputs second. The logos look like the label, so the developer never writes one, and the group never gets a name. WCAG 2.2 criteria 1.3.1, Info and Relationships, and 4.1.2, Name, Role, Value, both apply, and the fix is markup, not design.
What the group needs
A payment method selector is a radio group, and it should be marked up as one: a fieldset with a legend that names the group, such as Payment method, and real radio inputs inside it. The screen reader then announces the group name, the option name, and the checked state, which is everything the shopper needs to choose.
Each option needs a text name, not just a logo image. A card logo with an empty alt attribute inside a radio button contributes nothing to the accessible name, so the option announces as radio button, unchecked, with no words attached. Put the name in the label: Visa, Mastercard, American Express, PayPal, in plain text next to the logo.
The state change that gets missed
Picking a payment method usually changes the form below it: card fields appear, or a wallet button replaces them. That change has to be announced, or the shopper who picked PayPal will not know the card fields she was about to fill in have gone. A polite live region on the form area, or moving focus to the new section's heading, covers it.
The second missed state is the default. Most stores pre-select the first payment method, usually the card option, and never say so. A shopper who tabs through hears four unchecked radios and assumes nothing is chosen, then submits and gets a card form she did not ask for. If a method is pre-selected, its checked state must be in the markup, not just in the visual style.
Testing the payment step
Tab through the payment step with a screen reader and listen. You should hear the group name, each option name, and which one is checked. Pick a different method and confirm the form change is announced. Then try it with the keyboard alone and confirm you can reach every option and submit without a mouse.
Run the same check on the saved payment methods list for returning shoppers. A saved card shown as four dots and a logo, with no name and no way to tell which card is selected, is the same failure in a different place, and it hits the shoppers who buy most often.
Related reading: The Title II Dates Moved Again: April 2027 and 2028, and What Still Applies, Section 508 vs WCAG 2.1: Which Standard Your Federal Buyers Actually Check, Ready Means Not Asking Twice: Redundant Entry at Checkout.
Frequently asked questions
Does a payment method selector need a group label?
Yes. It is a radio group, and WCAG 1.3.1 requires the relationship to be programmatically determinable. A fieldset with a legend naming the group, such as Payment method, gives screen readers the context the logos give sighted shoppers.
Is a card logo enough of a label for a payment option?
No. A logo image with an empty alt attribute contributes nothing to the accessible name, so the option announces as just radio button. Each option needs a text label with the payment method name.
Should changing payment method announce the new form?
Yes. When picking a method swaps the fields below, that change has to be announced through a polite live region, or by moving focus to the new section, or the shopper will not know the card fields have gone.
What if a payment method is pre-selected?
Its checked state must be in the markup, not just in the visual style. A screen reader user who hears four unchecked radios will assume nothing is chosen, even when the store has already picked one for her.