ADA Risk in Accordion and FAQ Sections: Content Screen Readers Cannot Reach
Accordions that hide answers from assistive technology, heading structures that skip, and collapsed text that is still in the tab order. The ADA risk sitting in FAQ sections.
Almost every product page now ends with accordions: shipping, returns, ingredients, care. They are also one of the most reliably broken components in ecommerce, because each theme and app implements the expand and collapse behaviour differently, and half of them hide content from assistive technology in ways the visual design never shows.
The legal exposure is ordinary Title III territory. WCAG is a technical standard, not itself a law, but it is the standard decrees and settlements point to. An accordion whose button does not announce its state fails 4.1.2, and content a screen reader cannot reach at all is content the store effectively does not publish for those customers.
Buttons that are not buttons
The classic build is a heading or a div with a click handler. It looks like a button, opens like a button, and to a keyboard it does not exist, because a div never receives focus and has no role. Screen reader users may hear the question read as plain text with no hint that anything can be opened.
Correct construction is dull: a real button inside a heading, aria-expanded stating the state, and the answer in a region the button controls. When the section is collapsed, the answer should not sit in the tab order containing links nobody can see. Focus disappearing into hidden content is a 2.4.3 focus order failure and one of the most disorienting bugs a keyboard user meets.
Hidden from some, visible to others
Some accordions hide collapsed answers with CSS that search crawlers and sighted users handle one way, while screen readers announce the full text of every answer in sequence, making a ten question FAQ into a twenty minute listen with no way to skip by state. Others do the reverse. Both are defects, just in opposite directions.
Test by state, not by appearance. Tab to each question, check the announced state, open it, and confirm the answer follows the button in reading order. Then close it and confirm it is properly hidden from every input method, not just painted over.
Why this ends up in demand letters
Plaintiff testing tools and manual reviews both start on the pages every store has: home, product, cart. FAQ accordions sit on the product page, near the buy button, and their failures are easy to document with a recording. That combination, visible, common, and simple to evidence, is why component level faults feature in filings out of proportion to their size.
Fix the component once, in the theme, and the fix propagates. Patching individual pages while the shared accordion stays broken is how a store pays for the same fault three releases running.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Testing Screen Reader Order on Product Bundles and Kits, ADA Risk When Chat Widgets Cover the Checkout Button, and Checking Contrast in Sale Badges and Discount Labels.
Frequently asked questions
What makes an accordion accessible?
A real button in a heading, with aria-expanded stating whether it is open, controlling a region that holds the answer. Collapsed answers must be hidden from keyboard and screen reader alike, not just visually.
Can collapsed content stay in the tab order?
No. Links and controls inside a collapsed section must not receive focus while hidden. Focus moving to invisible elements fails WCAG focus order expectations and strands keyboard users.
Is WCAG itself the law under the ADA?
No. WCAG is a technical standard. Courts and settlements under ADA Title III use WCAG, currently 2.1 Level AA in most decrees, as the benchmark for whether a site is accessible.
Should all accordion sections start closed?
That is a design choice, not a requirement. What matters is that state is announced, content is reachable, and the first section being open does not hide the buy button or push key content out of reach.