Accessible Shipping Options in the Cart: Radio Groups Done Right

2026-10-16

Shipping selection looks simple, which is why it is so often rebuilt as a row of clickable cards with checkmark graphics. For keyboard and screen reader users those cards are a recurring failure: unreachable by Tab, unselectable by keyboard, or announced as generic clickable text with the price and date trapped in separate visual fragments.

The native pattern for this job already exists and shoppers with assistive technology know it cold: a radio group. The work is not inventing a better widget. It is styling the standard one well and wiring the price and date consequences into announcements shoppers can hear.

Use real radios under the card styling

Cards and radios are not in conflict. A label styled as a card can wrap a real radio input, giving the visual design teams want and the keyboard behavior shoppers need: Tab reaches the group once, arrow keys move between options, and selection follows focus the way radio users expect.

The failures start when the input is removed and selection is faked with click handlers on divs. At that point every behavior, keyboard support, screen reader announcement, focus visibility, has to be rebuilt by hand, and audits show it rarely is. Keeping the native input is the cheapest accessibility decision in the whole cart.

Announce price and date as one option

A shipping option is a bundle: method name, delivery estimate, and price. Screen reader users should hear that bundle as one label, such as Standard shipping, arrives Thursday, 6 dollars 95. When the parts live in separate spans read in odd order, shoppers piece together which price belongs to which date by memory and guesswork.

Free shipping options deserve the same completeness. Announce the free price explicitly rather than leaving a blank where the price should be, so the shopper hears a deliberate zero instead of wondering whether the price failed to load.

Announce the consequences of a change

Changing shipping changes the order total, and sometimes tax and delivery promises elsewhere on the page. Those updates need a polite live announcement: total updated, and the new total value. Without it, a screen reader user selects express shipping and has no confirmation the total they will pay has changed.

Focus should stay on the chosen radio after selection. Yanking focus to the updated total, however helpful it seems, breaks the shopper place in the group and punishes anyone comparing options back and forth. Announce the change, keep the focus, and let the shopper move on when ready.

Handle errors and cutoffs accessibly

Shipping options carry time logic: order in the next two hours for Friday delivery. Countdown text must be available to screen readers in the option label or nearby described text, not rendered only as a colored visual badge. A sighted shopper sees urgency. A blind shopper deserves the same information in words.

When an option becomes unavailable, for weight or destination reasons, a disabled radio with an explanation beats a vanished option. Disappearing choices confuse returning shoppers and screen reader users alike. State the option, state why it cannot be chosen, and keep the available choices clean and selectable.

Frequently asked questions

Why should shipping options use real radio buttons?

Because radio groups give keyboard operation, focus behavior, and screen reader announcements for free and in the pattern users already know. Custom clickable cards have to rebuild all of that and usually miss parts of it.

What should a screen reader announce for a shipping option?

The complete bundle in one label: method name, delivery estimate, and price, including an explicit free when the price is zero. Shoppers should never have to assemble an option from fragments read in visual order.

Should focus move to the order total after choosing shipping?

No. Keep focus on the selected option and announce the new total through a polite live region. Moving focus breaks the shopper place while they may still be comparing options.

How should unavailable shipping options be handled?

Show them disabled with a plain explanation of why, rather than removing them silently. Shoppers understand limits they can read about and distrust options that vanish without a reason.