New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
Can someone using only Tab and Enter open one of my FAQ questions?
What you'll have at the end
An expand-and-collapse section with a real button and aria-expanded state a screen reader announces correctly
You need
A working expand-and-collapse FAQ section already in your markup, its questions toggled by changing a CSS class on click, with no button, no ARIA state, and no way to reach any of it by pressing Tab.
Not covered
This does not cover the tabs pattern, where Arrow keys move between a single strip of always-visible peer panels, or a lone 'Read more' toggle with nothing else beside it, which needs no heading wrapper at all.
Leans on
Restore the focus outline your reset deleted
if the new button's focus ring turns out invisible once you style away the browser's default button look, the more common way this exact fix quietly breaks.
A custom toggle switch keyboard and screen reader users can flip
for a control whose state lives on the element itself, like a dark-mode switch, rather than in a separate region it opens, where aria-pressed is the right attribute instead.
Checked 22 Aug 2026
Part of the Web Accessibility cookbook