Accordion

Examples

Example with chevron on left

<vega-accordion
    draws-background="false"
    accordion-title="Accordion Title"
    expand-icon-align="left"
    expand="false"
    group-id="group-id"
>
    <div slot="title">This is the title</div>
    <div slot="content">Accordion content</div>
</vega-accordion>

Example with chevron on right

<vega-accordion
    draws-background="false"
    accordion-title="Accordion Title"
    expand-icon-align="right"
    expand="false"
    group-id="group-id"
>
    <div slot="title">This is the title</div>
    <div slot="content">Accordion content</div>
</vega-accordion>

Usage

Accordions, also known as expansion panels or collapsible panels, are used to aid usability for pages which contain large amounts of content. They enable creation of elements on a page where one can place sections of content which can be shown or hidden by clicking on a button which expands or contracts the page.

Common places where Accordions may be used include:

• Long forms
• Other pages where there is a lot of content which can be divided into smaller, digestible sections.

Accordion States

Accordions have two states:

• Expanded (or open)
• Hidden (or closed)

There are also some states for the chevron icon. When in active or hover state, a circle appears over the chevron.

Properties

All Parameters

<vega-accordion
	draws-background: true|false,
	prefix-icon: Icons,
	accordion-title: 'Accordion Title',
	expand-icon-align: 'left'|'right',
	expand: true|false,
	group-id: 'group-id',
>
	<div slot='title'>Accordion title</div>
	<div slot='content'>Accordion content</div>
	Child Elements
</vega-accordion>

For more details, view in Storybook.

Accessibility

In order to make accordions accessible, it’s considered best practice to toggle several ARIA properties and states, specifically aria-hidden and aria-expanded.

The following criteria are also required.

• ARIA attributes are allowed for element role and have valid values.
• Text-spacing set through style-attributes can be adjusted with custom stylesheets.
• Contrast between foreground and background meet WCAG 2 AA standards.
• Links have discernible text.
• Links with the same accessible name serve the same purpose.

Best Practices

One known problem with accordions is that if they are closed, this requires users to click on items one at a time to open them, which increases the interaction cost. In general, users are more likely to scroll than to open individual accordion items.

In many situations, it is better to provide static content on a page; this not only increases the likelihood that content can be read without excess interaction, it makes it easier for users who choose to search for content on a page.

Also, accessibility should be a major consideration for your site. It is important to ensure that all components of the accordion are encoded with accessibility in mind. Note: Vega accordions are built to handle these use cases.

For this reason, before using accordions it is best to consider the individual use case.

Reasons to avoid using accordions can include the following:

• If all of the content on the page is required for a user to complete a task or gain information.
• Users need to or wish to print the content on the page. Accordion content will typically not print unless the accordion is open.

Reasons for using accordions can include the following:

• Situations where only a few pieces of content on a page are necessary, but where there is supplemental content which can help increase understanding.
• Situations where content is only necessary for a subset of users such as content within code blocks.
• Situations where headings can provide a minimized information architecture of a page, such as in a Frequently Asked Questions (FAQ) page.
• Accordions can be better than using in-page anchor links because these break users’ mental models for how hyperlinks behave, which is typically to open a new page. -Mobile devices: The use of accordions can create a positive impact on the user where there is limited space available, such as on mobile devices.