Shipping method radio groups in the cart: where accessible names go missing

The card pattern is good design visually. A bordered box per method, the selected one highlighted, the whole box clickable. The failure is underneath: the cards are built from divs with click handlers, the actual radio inputs are hidden or absent, and keyboard focus lands nowhere visible. A keyboard user tabs past the shipping section entirely while the page happily reports a method as selected.

The repair keeps the cards and restores the semantics: real radio inputs sharing one name attribute, each card a label element for its input, focus visible on the card when its input has keyboard focus. That is native HTML doing the whole job, selection, arrow key movement, and announcement, with no script required for the core behaviour.

Cards that forgot they were radios

Individual labels are not enough. WCAG technique H71 and every practitioner guide since have asked for the group itself to be labelled, with a fieldset and legend in native HTML, or role radiogroup with an accessible name in a custom build. The legend is the question the group answers: delivery method, or shipping speed.

Without it, a screen reader user entering the group mid form hears express, radio button, checked, with no statement of what is being expressed. In a checkout with several radio groups, payment method, delivery method, gift options, the unlabeled groups blur into each other and errors follow. Auditors mark this under 1.3.1 Info and Relationships, because the relationship between the options is only visual.

The group needs a name too

Here is the test: read only the accessible labels of your shipping options aloud. If they come out as standard, express, priority, your labels fail the real world even if they pass a name check. The deciding facts are the price and the arrival estimate, and both must be inside the label text that assistive technology announces, standard delivery, arrives Thursday, 4.99, is a label a shopper can act on.

Prices and dates belong inside the label

Keep reading: Promo code errors in the cart: announce the failure, keep the code, say what was wrong, Cart drawers and focus: what a keyboard user actually hits on your store.

When the choice changes the total

Free shipping needs the same treatment. An option labelled standard with free written elsewhere on the card, outside the label, will be announced without its best feature. Put the deciding words where the choice is made. Sighted users will not notice the change. Screen reader users will notice nothing else.

Selecting express shipping changes the order total, sometimes by a third of the basket value. That change is a status update, and WCAG 4.1.3 expects it to be announced politely when it results from the user action. Many checkouts update the total silently, leaving a screen reader user to discover the new total at the review step, or not at all.

Announce the new total once, and keep the announcement short: order total now 84.50. Do not announce the whole summary panel, and do not move focus to it. The shopper knows what they did. They only need the consequence confirmed, in the same way a sighted shopper glances at the total changing colour.

Frequently asked questions

Do shipping options have to use real radio inputs?

They do not have to use the native element, but they must reproduce everything it provides: a shared group role and label, one selectable option at a time, arrow key navigation, and correct checked state exposed to assistive technology. Native inputs give all of that free, which is why practitioners default to them.

What should the legend for a shipping radio group say?

The question the group answers, in the shopper language: delivery method or how fast do you need it. Keep it short. The detail belongs in the individual labels, where each method carries its own price and arrival estimate.

Should delivery dates in shipping labels be exact dates or day ranges?

Exact estimated dates are more useful and more honest when the estimate is real, arrives Thursday 12 November rather than 3 to 5 business days. If the estimate is genuinely a range, put the range in the label. What matters for accessibility is that whatever a sighted shopper sees is what the label announces.

How do I test my shipping radio group with a screen reader?

Tab into the group and listen for the group label first. Then arrow through the options and check that each announcement includes method, estimate, and price, and that selecting one announces the new total. Finally, submit with an error elsewhere and confirm focus handling does not strand you outside the group.