Website Accordions Explained: Expandable Sections That Visitors Can Use

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Use a clear section heading

   0:18

   The heading should explain the content available inside.

   On-screen labels: Specific heading; Associated panel; Clear content purpose.

2. 2

   Step 2: Make the opener a real control

   0:30

   The interactive heading needs appropriate button behaviour.

   On-screen labels: Keyboard activation; Button semantics; Reachable control.

3. 3

   Step 3: Communicate open and closed

   0:42

   The expanded state should be available to assistive technology.

   On-screen labels: Collapsed state; Expanded state; Associated content.

4. 4

   Step 4: Choose the opening behaviour

   0:54

   Decide whether one or several panels can remain open.

   On-screen labels: Single open panel; Several open panels; Consistent behaviour.

5. 5

   Step 5: Review what is hidden

   1:06

   Visitors still need a clear route to important information.

   On-screen labels: Important content; Discoverable labels; Useful organisation.

6. 6

   Step 6: Test the actual interaction

   1:18

   Check opening, closing and moving through the content with a keyboard.

   On-screen labels: Open and close; Read the panel; Continue the task.

Common questions

Go further