Freelopers
Start a conversation

Live example

Accessible FAQ Accordion

The accordion below is the module itself. Try it with the mouse, then put the mouse down and press Tab.

Site pages, landing pages, blog Setup guide

Try this

Press Tab until the focus outline lands on a question, then press Enter or Space. The answer opens and the state is announced, not just drawn. Tab again and focus goes to the next question rather than into hidden content.

Questions about this module

Each question is a real button rather than a styled div, so it is reachable by Tab and operable by Enter and Space with no extra code. The open state is carried in aria-expanded, so a screen reader says whether the answer is showing. The answer is tied to its question with aria-controls. The focus outline is a field you colour, not something to be removed.

The questions and answers are in the page markup, so the content is readable and indexable whatever happens to the script. The open and close behaviour needs JavaScript, as any accordion does.

Yes. Each instance scopes its own markup and behaviour, so two accordions on one page do not interfere with each other.

They are fields. Set Expand all label and Collapse all label to whatever your page language needs, per instance, without touching the module.

Because it is how someone navigating by keyboard knows where they are. A faint outline on a similar background is the most common finding in an accessibility audit of an accordion, which is why the colour is a control rather than a hardcoded value.

Every colour above is a field

Question and answer text, both backgrounds, the border, the hover and open states, the arrow at three states, the shadow, and the focus outline. Nothing here needed custom CSS.

What to do next

Read the setup guide, or tell us what you are building: support@freelopers.com.