The FAQ Accordion That Announces Nothing When It Opens

November 7, 2026

An accordion button that expands a panel without telling a screen reader has failed WCAG 4.1.2 and 4.1.3 at once. The fix is aria-expanded, a real button, and a heading structure that survives the toggle.

A shopper opens the FAQ accordion on a product page, looking for the return policy. The panel expands, the answer appears, and her screen reader says nothing, because the button that opened it has no expanded state in its markup. She tabs forward expecting the answer and lands on the next question instead, because focus never moved and nothing announced the change.

Accordions are small, and they are everywhere: FAQs, shipping details, size guides, filter groups. They fail in the same three ways on store after store, and the fix is about ten lines of markup, which is why they are worth watching as a category rather than fixing one at a time.

The three failures

First, the button is not a button. A styled div with a click handler has no role, so a screen reader announces it as text or skips it, and a keyboard user cannot activate it with Enter or Space. Use a real button element and the problem disappears.

Second, the state is missing. A button that expands a panel must carry aria-expanded, true when open and false when closed, so the screen reader announces the change. Without it, the shopper has no way to know whether the panel opened, and no way to know which questions are already open.

Third, the panel is not connected to the button. The button needs aria-controls pointing at the panel's id, and the panel needs a region role with an accessible name, usually the question text itself. Without the connection, the screen reader treats the answer as unrelated content that appeared for no reason.

The heading problem nobody checks

Most FAQ accordions put the question inside the button, which is correct, but then wrap the button in no heading at all, or in a heading that duplicates the question. A screen reader user navigating by headings skips the whole FAQ section, because there is nothing to land on. Each question should sit in a heading, with the button inside it, so heading navigation and button activation both work.

The other failure is the opposite: every question wrapped in an h2, which flattens the page outline and buries the real sections. Match the heading level to the section. An FAQ section under an h2 gets h3 questions, not h2s.

What to check on your own store

Tab to an FAQ question and press Enter. The panel should open, the screen reader should announce expanded, and the next Tab should land inside the answer, not on the next question. Close it with Enter again and confirm it announces collapsed. Then navigate by headings and confirm each question appears once, at the right level. If any of those fail, the accordion needs markup work, not a redesign.

Frequently asked questions

Why does an accordion button need aria-expanded?

Because the screen reader cannot see the panel open. Aria-expanded tells it the button controls something that is now open or closed, and it announces the change. Without it, the shopper has no way to know whether pressing the button did anything.

Can an accordion question be a div with a click handler?

No. A div has no button role, so a screen reader announces it as text or skips it, and keyboard users cannot activate it with Enter or Space. Use a real button element.

Should each FAQ question be a heading?

Yes, at the level that fits the section. Questions under an h2 FAQ section should be h3s, with the button inside the heading. That lets screen reader users navigate by headings and still activate each question.

Where should focus go when an accordion opens?

It should stay on the button, with the state announced, and the next Tab should land inside the answer. Moving focus into the panel on every open is disorienting, and leaving the answer unreachable is worse.