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 Medicaid 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., plus icon, minus icon) that signals the component's collapsed or expanded state.

Medicaid Accordions

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

  • This is a list item
  • Another list item

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.

No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.

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 Medicaid.gov 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