How do you make a Shopify FAQ accordion accessible?

Most FAQ accordions fail the same three tests: the toggle is not a real button, the expanded state is not announced, and keyboard users cannot reach the content. Fix those three and the accordion works for everyone.

The three failures in nearly every accordion

FAQ accordions look simple and break in predictable ways. The toggle is a div with a click handler instead of a button, so keyboard users cannot focus it and screen readers do not announce it as interactive. The expanded and collapsed states are conveyed only by a rotating plus icon, so screen reader users get no state change announcement. And the content panel is hidden with display:none toggled by JavaScript that never moves focus or manages the tab order, so keyboard users tab into content that may not be visible.

Test any accordion in thirty seconds: unplug the mouse and try to open a question with the keyboard alone. If you cannot reach the toggle with Tab, that is failure one. Open it and listen with a screen reader: if nothing announces expanded, that is failure two. Then check whether the newly revealed content sits in a sensible place in the reading order. Most theme accordions fail at least two of the three.

Build the toggle as a real button

The fix starts with markup. Each accordion header should be a native button element, not a div or a span with a click handler. Native buttons are focusable by default, activatable with Enter and Space, and announced as buttons by every screen reader. No ARIA can fully substitute for the real element.

Wire the button to its panel with aria-expanded and aria-controls. The button carries aria-expanded="false", flipping to true when open, and aria-controls pointing at the panel's id. The panel gets role="region" and an aria-labelledby pointing back at the button. This two-way wiring is what lets a screen reader user hear 'What is your return policy, button, collapsed' and then 'expanded' after activating it. It is a small amount of markup and it is the entire difference between an accordion that works and one that decorates.

Keep the heading structure honest. FAQ questions are usually headings, often h2 or h3 depending on the page. The button should sit inside the heading, not replace it: an h3 containing the button preserves the document outline for screen reader users who navigate by headings, which is one of the most common navigation methods.

Manage focus and motion like you mean it

When a panel opens, do not yank focus into it. Moving focus on expand disorients screen reader users who were reading the question list. The correct behavior is quieter: update aria-expanded, reveal the panel, and let the user move at their own pace. Focus management matters on close only if closing would strand focus inside a now-hidden panel, in which case return focus to the toggle.

Allow one open panel at a time or many, but decide deliberately and keep it consistent. Single-open accordions are easier to scan; multi-open suits comparison. Either is fine accessibly as long as the state of each toggle is announced independently. What is not fine is an accordion where opening one panel silently closes another without announcing the change.

Respect reduced motion. Accordions love animated height transitions, and those animations can trigger vestibular disorders. Wrap the transition in a prefers-reduced-motion media query that snaps the panel open instantly for users who request it. This is one line of CSS and it is frequently the difference between a component that is merely compliant and one that is genuinely comfortable.

Test it the way your users will break it

Run the keyboard test first: Tab to each toggle, open with Enter, open with Space, confirm the panel content is reachable in a logical order. Then the screen reader test: confirm each toggle announces its name, its role, and its expanded state, and that state changes are announced on toggle. Then the zoom test: at 200 percent zoom and 320 pixel width, the accordion should reflow without horizontal scrolling or overlapping toggles.

Watch for the common theme-framework pitfalls. Some accordion scripts rebuild the DOM on toggle, which can drop focus or reset screen reader context. Some animate with max-height transitions that leave the panel technically visible to assistive tech while visually collapsed. And some FAQ sections load their content from an app or metafield after the page renders, which means the accessibility wiring has to be applied after the content arrives, not just on initial page load.

Document the pattern once and reuse it. The FAQ accordion is rarely the only collapsible on a Shopify store: shipping info tabs, product detail disclosures, and mobile menus all share the same mechanics. Fix the pattern in one shared snippet and every accordion on the store inherits the fix. That is how a single component repair becomes a store-wide accessibility win.