Accordion

Accordions are used to hide and show large amounts of content

Anatomy

The accordion component that allows users to expand and collapse content sections. It is commonly used to display a large amount of information in a compact space, making it easier for users to scan and consume content.

Accordion Item: Container for collapsed or expanded panel of accordion.
Chevron Icon: To indicates states if the panel is open or closed.
Title: The heading text for the information being shown in the content section.
Content: This section is where users can find more information and details about the container’s subject.

Usage

The accordion component is used to create expandable and collapsible sections of content. This can be useful in situations where you have a large amount of information to display, but want to keep the interface compact and easy to navigate.

Common places buttons appear : Often used in FAQs, product descriptions, and other situations where users need to access detailed information.

When to use

When you have a large amount of content that needs to be displayed in a compact space.
When you want to create a clean and organized interface that is easy to navigate.
When you want to group related content together in a logical way.

When not to use

When you only have a small amount of content to display.
When you want to display all content sections at once.
When the content is not related and does not need to be grouped together.

Accessibility

The accessibility of the Accordion component is an important consideration to ensure that users with disabilities or impairments are able to interact with the component effectively. Here are some accessibility considerations for the Accordion component:

Keyboard Navigation: Users should be able to navigate through the accordion using only the keyboard, without requiring a mouse or other pointing device. This means that the accordion should be operable using the Tab, Arrow, and Enter keys, and should have clear keyboard focus indicators.
Screen Reader Support: Users who rely on screen readers to access content should be able to navigate and understand the accordion structure and content. This can be achieved by ensuring that appropriate ARIA roles and attributes are used to identify the accordion and its elements, and by providing descriptive labels and instructions.
Color Contrast: The accordion should have sufficient color contrast between the background and text to ensure readability for users with low vision or color blindness. This can be achieved by using a color contrast ratio of at least 4.5:1 for text and interactive elements.
Responsive Design: The accordion should be designed to work effectively across a range of screen sizes and device types. This means that the accordion should be responsive and scalable, with clear and legible text and buttons on smaller screens.
Clear and Concise Content: The content within the accordion should be clear and concise, with headings and labels that accurately describe the content that is revealed when the accordion is expanded. This can help users with cognitive disabilities to understand the purpose of the accordion and its content.

Use clear Heading title or section for more accordion

Don't

Use more than 8 accordion to make hard to find title

Content

When creating Accordion :

The content should be organized into logical sections that can be easily expanded and collapsed.
Use headings and subheadings to break up the content and make it easier to scan.
Use bullet points or numbered lists to make the content more digestible.
Include relevant images or other visual aids to help illustrate the content.
Use clear and concise language for the header labels.

Use clear and concise language for the header labels.

Don't

Use unclear or misleading language for the header labels.

Utilize the content section to describe a subject in details.

Don't

Content section to only describe a title with one or less sentence.