Test opening items with the keyboard
Use Tab then Enter or Space to open and close each item. Title needs to indicate open status; Hidden content must not keep controls in Tab order.
Accordion Design system
Collapse content while still making it easy to find and navigate.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
Open the answer in the FAQ list
The question title is a button with an open or closed state; When opened, the answer is right below and still linked to that item.
Variants and use cases
Open and collapse marks
Select the mark that indicates whether the panel is closed or open; Symbol orientation must follow the actual state.
Use the keyboard to open and close; Check that the accent and aria-expanded change at the same time.
Example The plus sign turns into a minus sign when the answer is open.
General information
The open section displays the content in place.
Advanced settings
The open section displays the content in place.
General information
The open section displays the content in place.
Advanced settings
The open section displays the content in place.
Row statuses
Distinguish default, hover, focus and open by appearance and accessibility properties.
Tab through each title and then use Enter; An open panel cannot lose focus.
Example The focus border is still visible on the opened row, independent of the background color.
Default
The open section displays the content in place.
Selecting
The open section displays the content in place.
Activities
The open section displays the content in place.
Not available
The open section displays the content in place.
How to divide items
Use separation lines, spacing or background blocks according to the relevance of the content.
Open many long sentences; The spacing needs to make it clear which answer the title belongs to.
Example A group of questions uses a dividing line; Other groups have their own titles.
General information
The open section displays the content in place.
Advanced settings
The open section displays the content in place.
General information
The open section displays the content in place.
Advanced settings
The open section displays the content in place.