Sample report
Sample keyboard checkout report
Where a keyboard-only shopper cannot get past
Blocks the sale
1. “Add to cart” on the product page is not a real button
The control looks like a button. It is a <div> with a click script. Tab never lands on it. Enter and Space do nothing. A mouse user adds the throw. A keyboard user cannot.
What we did: opened /p/wool-throw, tabbed the whole page twice. Focus went from quantity to “Share” and skipped the orange box.
Fix first: make it a real <button type="button"> (or a submit control) that works with Enter and Space. Do not keep a hidden real button and a visible fake one.
Blocks the sale
2. Country and shipping menus on the cart ignore the keyboard
Delivery country is a custom list. The native <select> is hidden with display: none. Arrow keys do nothing. Clicking the pretty box is the only way to choose “Germany” or “France”. Without a country, shipping does not calculate and “Continue to payment” stays disabled.
What we did: tabbed into the field. Focus sat on a <div role="button"> that did not open. Esc, arrows, and type-ahead did nothing.
Fix: use a native select, or a listbox that opens on Enter/Space, moves with arrows, and picks with Enter. The real value must be what the checkout form submits.
Blocks the sale
3. Terms checkbox cannot be ticked without a mouse
The visible box is a styled span. The real checkbox is off-screen and not in the tab order. “Pay” stays grey until the span is clicked. A keyboard user can fill name and address and still cannot accept terms.
Fix: a visible <input type="checkbox"> with a <label for>. Space must toggle it. The pay button should explain why it is disabled.
Often abandons
4. The mini-cart drawer traps people
Adding an item (with a mouse, in this sample) opens a right-hand drawer. Focus does not move into it. Tab continues through the page underneath. There is no keyboard control that closes the drawer. A cookie banner sits on top of the first field in the drawer.
Fix: when the drawer opens, move focus to its heading or close control. Trap focus only if you also provide a working close control (Esc and a real button). Dismiss or tab through the cookie banner before checkout fields.
Slows checkout
5. The form looks complete but errors are invisible from the keyboard
Leaving postcode empty and pressing Enter on “Continue” does nothing obvious. A red outline appears only if you click the field. There is no error text and no aria-invalid. Phone uses a drag widget for the country prefix.
Fix: name every field in visible text. On submit, move focus to the first error and announce the message in text, not colour alone. Replace the drag prefix with a select or typed code.
Short computer-scan note
The scan flagged missing alternative text on three payment-mark images in the footer, an empty “Search” button name, and low contrast on the grey “Continue” label. It did not flag the fake Add to cart control, the hidden country select, or the terms span. That is expected. A scan is a starting list. The keyboard pass is the main work.
Fix order for the developer
- Turn Add to cart into a real button. Confirm you can add the product with Tab and Enter only.
- Replace the country and shipping widgets with keyboard-operable controls. Confirm a country can be chosen with arrows.
- Use a real labelled checkbox for terms. Confirm Space ticks it and Pay becomes available.
- Fix drawer and cookie-banner focus so Tab can reach address fields and leave the cart.
- Show submit errors in text and move focus to the first one.
- Then the scan leftovers: button name, footer image text, contrast on the disabled pay style.
Draft accessibility statement
Draft — not a finished statement and not a claim that the shop meets any law or standard.
Example Home Shop wants people to be able to find products and start checkout with a keyboard. On the date of this sample, a keyboard-only shopper could open the homepage and search, but could not add the sample product to the cart, choose a delivery country, or accept the terms. We are giving this list to our developer in the order above. This paragraph is a draft you would edit. It is not legal advice.
What this sample is not
- Not a screen-reader test (no NVDA, VoiceOver, or TalkBack).
- Not a WCAG certificate. There is no certificate that makes a shop “done”.
- Not legal advice, and not a statement that a shop is compliant or will avoid a fine.
- Not an overlay or any widget installed on the shop.
- Not the fixes themselves. The list tells a developer what to change.
- Not a retest. Checking again after fixes would be a new order.