WEBVTT

00:00:00.000 --> 00:00:06.000
What is the website control that opens a section of content?

00:00:06.000 --> 00:00:13.000
An accordion uses interactive headings to reveal or hide associated panels.

00:00:13.000 --> 00:00:18.000
Check the control and its hidden content.
6 accordion checks.

00:00:18.000 --> 00:00:30.000
Use a clear section heading
The heading should explain the content available inside.
Specific heading · Associated panel · Clear content purpose

00:00:30.000 --> 00:00:42.000
Make the opener a real control
The interactive heading needs appropriate button behaviour.
Keyboard activation · Button semantics · Reachable control

00:00:42.000 --> 00:00:54.000
Communicate open and closed
The expanded state should be available to assistive technology.
Collapsed state · Expanded state · Associated content

00:00:54.000 --> 00:01:06.000
Choose the opening behaviour
Decide whether one or several panels can remain open.
Single open panel · Several open panels · Consistent behaviour

00:01:06.000 --> 00:01:18.000
Review what is hidden
Visitors still need a clear route to important information.
Important content · Discoverable labels · Useful organisation

00:01:18.000 --> 00:01:30.000
Test the actual interaction
Check opening, closing and moving through the content with a keyboard.
Open and close · Read the panel · Continue the task

00:01:30.000 --> 00:01:39.000
Your checklist
Use a clear section heading · Make the opener a real control · Communicate open and closed · Choose the opening behaviour · Review what is hidden · Test the actual interaction

00:01:39.000 --> 00:01:47.000
Keep the content findable and the interaction understandable.
jerseyweb.je