Skip to main content

Accordion

The accordion is an interactive user interface component utilized to display a list of headers. Clicking a header reveals or hides the associated content panel, a mechanism known as progressive disclosure. The primary goal is to structure content, helping users scan and understand its organization.

When to use an accordion:

Use the accordion component primarily to manage large quantities of information by limiting and prioritizing visible content, thereby reducing the user's cognitive load. It allows visitors to explore more detailed information at their own pace.

  • Organize FAQs or Q&A sections where only the question needs to be visible initially.
  • Group related content or information that is secondary to the main purpose of the page.
  • Segment complex information into logical, digestible chunks.

When to avoid an accordion:

Avoid using accordions for information that users must see immediately or content that needs to be compared easily, as hiding content requires additional interaction.

Anatomy and Visual Specifications

In this section, we document the specific elements that require consistent styling, using the defined IKN color palette and typography standards.

Component Anatomy:

An accordion consists of the following key parts:

  • Accordion Header/Title: The clickable region containing the summary text.
  • Content Panel: The expandable area that holds the detailed information.
  • Indicator Icon: The visual element (e.g., chevron) that signals the component's collapsed or expanded state.

IKN Accordions

First Amendment

Second Amendment

Third Amendment

Fourth Amendment

Fifth Amendment

Interaction and Behavior

This section documents how the accordion must behave to meet user expectations and consistency principles.

  1. Toggling Behavior: A click or tap anywhere on the header area of a collapsed accordion must expand the associated content panel. A click or tap on an expanded header must collapse the content panel.
  2. State Indication: The indicator icon must change or rotate (e.g., changing from a plus to a minus, or rotating a chevron) to provide a clear visual indication of the component's state (expanded or collapsed).
  3. Animation: Content panels should open and close smoothly (e.g., via vertical animation) to prevent jarring transitions and provide a predictable user experience.

Accessibility and Implementation Notes

Since IKN is a government website, accessibility is a core design standard. Compliance with accessibility standards is required for launching products.

Accessibility Requirements (Section 508 / WCAG):

  • Color Contrast: Maintain a minimum 4.5:1 contrast ratio between the text and background color in all states (default, hover, and focus) to comply with Web Content Accessibility Guidelines (WCAG).
  • Keyboard Navigation: The accordion header must be focusable and fully operable using keyboard controls (Space or Enter keys). Keyboard navigation is a fundamental accessibility test.
  • ARIA Attributes: Developers must include appropriate ARIA roles and attributes (e.g., aria-expanded) to communicate the component's current state to screen reader users.
  • Content Zoom and Reflow: The layout must allow users to zoom text up to 200% without breaking the design or losing content.

Implementation Notes:

  • Reusability: The accordion is a component, defined as a "reusable chunk of a user interface". The goal is to provide clean, reusable code snippets so developers do not have to write code for each element from scratch.
  • Utility Classes: Use USWDS-style utility classes for styling overrides or rapid prototyping, as these classes are mapped directly to design tokens and scoped to a single CSS property (e.g., background-color, border-style).

Testing and Quality Assurance (For Testers):

Testing the component ensures it is consistent and accessible.

  • Functional Testing: Verify that the component reliably opens and closes content across different browsers and breakpoints.
  • Accessibility Testing: Conduct foundational accessibility testing, including automated testing (e.g., axe DevTools), manual checks of color contrast and keyboard navigation, and checking content zoom and reflow.
  • Visual Consistency: Verify that styling (colors, fonts, spacing) adheres strictly to the defined IKN specifications and established USWDS guidelines.

Additional Specifications

For any additional information about specifications, guidelines, accessibility and usage, please refer to the Accordion component on the USWDS website:

USWDS - Accordion