Accessible FAQ accordions and show/hide sections: a 5-minute test and fixes

Almost every small-business site has an FAQ, and most templates show it as an accordion: a list of questions that open when you click them. Done well, it's tidy and easy to scan. Done badly, the questions are plain text that only respond to a mouse click, screen readers can't tell whether a section is open, and keyboard users can't reach the answers at all. Here's how to check yours and what to change.

The 5-minute accordion test

1. Tab reaches every question, and Enter or Space opens and closes it (2.1.1 Keyboard). If Tab skips the questions, they're probably plain divs with a click handler.
2. You can see which question has focus, with a clear outline or highlight (2.4.7 Focus Visible).
3. A screen reader says it's a button and whether it's open, for example "Do you take walk-ins?, button, collapsed" (4.1.2 Name, Role, Value). Free screen readers are covered in our screen reader test.
4. Questions are headings (usually H2 or H3, in order), so people who jump by heading can find them (1.3.1 Info and Relationships, 2.4.6 Headings and Labels).
5. The plus/minus or arrow icon isn't the only clue, and it's visible enough: icons that show state need at least 3:1 contrast (1.4.11 Non-text Contrast), and question and answer text needs 4.5:1 (1.4.3 Contrast). Check with our free contrast checker.
6. On a phone, the whole question row is tappable, not just a tiny icon, and rows are at least 24 by 24 CSS pixels (2.5.8 Target Size).
7. Opening one question doesn't move you to the top of the page or close the one you were reading without warning.

The simplest fix: details and summary

HTML has a built-in show/hide element that works with the keyboard and screen readers without any script:

<h2>Frequently asked questions</h2>
<details>
  <summary>Do you take walk-ins?</summary>
  <p>Yes, Tuesday to Saturday from 9 to 5. Call (918) 555-0100 to check wait times.</p>
</details>
<details>
  <summary>Is there parking?</summary>
  <p>Free parking is behind the building, with two accessible spaces by the side door.</p>
</details>

Style it however you like, but keep a visible focus outline on the summary.

If you need a scripted accordion

The W3C ARIA accordion pattern and its working example show the full version. The key parts are a real button inside a heading, and aria-expanded that your script flips between "true" and "false":

<h3>
  <button type="button" aria-expanded="false" aria-controls="faq1">
    Do you take walk-ins?
  </button>
</h3>
<div id="faq1" hidden>
  <p>Yes, Tuesday to Saturday from 9 to 5.</p>
</div>

Common mistakes we see

• Questions built from div or span with a click handler, so Tab skips them.
• No open/closed state for screen readers (missing aria-expanded).
• Answers hidden with CSS that still lets Tab land on invisible links, or the reverse, answers that never show up for a screen reader.
• Important details only in the FAQ, such as prices, hours or cancellation rules. Put key facts on the main page too.
• Focus outline removed to "clean up" the design.

On Wix, Squarespace, Shopify or WordPress

Most builders have an FAQ or accordion block. Test it with the 7 checks above before you fill it in; built-in blocks vary by theme and version. If yours fails the keyboard or screen reader checks, a plain list of questions as headings with answers underneath is fully accessible and just as easy to read. Our Wix, Squarespace, Shopify and WordPress guides cover each platform.

What an automated scan can and can't tell you

An automated scan, including ours, catches unnamed buttons, some invalid ARIA, skipped heading levels and many contrast failures. It can't tell whether the questions respond to the keyboard, whether the open/closed state updates, or whether hidden answers behave correctly. The 5-minute test above covers those. This page is general information, not legal advice.

Related: accessible sliders and carousels, accessible navigation menus, 5-minute keyboard test, heading structure, accessible tables for prices, hours and menus.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Accessible tables for prices, opening hours and menus: a 5-minute test and fixes
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.