Do Shopify accordions work for keyboard-only shoppers?

Often not. Product-page accordions, the expandable panels holding shipping details, size guides, and return policies, are frequently built from clickable divs with no button semantics, no keyboard handler, and no ARIA state. A keyboard-only shopper tabs straight past them and never knows the information exists. The fix is structural, not cosmetic: real button elements, aria-expanded that updates on toggle, and panel content that stays in the tab order when open.

Where accordions hide critical information

On the modern Shopify product page, the accordion is where the important non-marketing information lives. Shipping times, return windows, size guides, material details, and care instructions increasingly sit behind collapsible panels to keep the page visually clean. That design decision concentrates purchase-critical information in a single component type.

This matters because the information behind accordions is exactly what hesitant shoppers need. Someone unsure about sizing opens the size guide accordion; someone worried about delivery opens shipping info. If those panels are unreachable by keyboard, the shoppers who most need reassurance are the ones least able to get it, and the store loses the sale without ever knowing why.

FAQs, shipping policy pages, and footer link groups use the same pattern. The accordion is no longer a decorative flourish; on many stores it is the primary container for policy content, which puts it squarely in the path of accessibility scrutiny.

The three ways they break

The most common failure is the div-as-button. The clickable header is a div with a JavaScript click handler, which means it is not focusable by keyboard at all. Mouse users click it happily; keyboard users tab past it as if it were plain text. The fix is a native button element, which is focusable and operable by default.

The second failure is missing state. Even when the header is a real button, many implementations never set aria-expanded, so screen reader users hear a button with no indication of whether the panel is open or closed, and no announcement when it toggles. The interaction works but communicates nothing, which for a screen reader user is nearly the same as broken.

The third is the unreachable panel. Content inside a collapsed panel should be removed from the tab order, and content in an expanded panel should be reachable. Implementations that merely hide panels visually, with CSS that screen readers and keyboards ignore, leave phantom tab stops on invisible content. Shoppers tab into empty space and wonder what broke.

What correct markup looks like

The accessible accordion is not complicated. Each header is a button element containing the visible label. The button carries aria-expanded, true or false, and aria-controls pointing at the panel id. The panel is a region whose visibility is toggled in a way assistive technology respects, hidden attribute or equivalent, not just zero opacity.

Keyboard behavior follows the button default: Enter and Space toggle the panel. Arrow-key navigation between accordion headers is a nice enhancement from the ARIA authoring practices, but it is optional; the non-negotiable part is that every header is reachable and operable with the keyboard alone.

Animation deserves a mention. Accordions that animate height with JavaScript often keep panels technically visible during the transition, creating brief phantom tab stops. Keeping transitions short and honoring prefers-reduced-motion avoids turning a visual nicety into a keyboard obstacle.

How to audit yours

Start with the keyboard. Load a product page, unplug the mouse, and tab through it. Every accordion header should receive visible focus, toggle with Enter, and announce its state change. Count how many headers you can reach; then count how many exist visually. Any gap is a defect.

Then check the markup. Inspect an accordion header in dev tools: if it is a div, span, or heading with a click handler instead of a button, flag it. Check for aria-expanded on the header and verify it flips between true and false when toggled. These two checks catch the large majority of failures.

Finally, test with content that matters. Open the shipping and returns accordions by keyboard and confirm the panel text is actually readable in order. Some implementations move focus oddly or leave the panel content outside the reading order, which passes a superficial check and fails a real shopper.

The honest bottom line

Accordions fail quietly, which is what makes them dangerous. There is no error message when a keyboard shopper skips past the size guide; there is just a lost sale and a barrier a scanner will eventually flag. The fix is a small, well-understood markup pattern, and the audit takes ten minutes with a keyboard. Given how much purchase-critical content now lives behind these toggles, the accordion deserves a place near the top of every Shopify accessibility checklist.