--- title: Accordion date: 2023-12-17T12:11:00-08:00 author: Josh Magness canonical_url: "https://designsystem.umd.edu/components/accordion" section: Components --- # Accordion Accordions group related sections of content into blocks that can be opened and closed. This helps users find and choose which sections of content they want to read, such as questions in an FAQ.  Groups sections of related content in blocks that can be opened and closed ## Dos - Use when multiple sections of heavy text are required - Use brief but descriptive headers that give an idea of the content in each accordion - Content inside accordions can be split into paragraphs with sub-headers ## Variations [View component playground: Accordion](https://playground.designsystem.umd.edu/?path=/story/components-accordion--light) ## Accessibility ### Built in accessibility **Keyboard Accessible** Users can navigate through focusable content using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ key can activate and toggle accordion panels, and focus can move away from the component as needed. WCAG 2.1.1: Keyboard; WCAG 2.1.2: No Keyboard Trap This navigation is done in sequential and logical order. Clickable elements within opened accordions integrate into the tab order automatically. WCAG 2.4.3: Focus Order **State Change Announcement** Screen readers announce the state changes (expanded/collapsed) of the accordion panels, informing users of content visibility changes WCAG 4.1.2: Name, Role, Value **Hover and Focus State** The headline link and call to action link have distinctive styling for both hover and focus states, providing visual cues that the element is interactive. WCAG 1.4.13: Content on hover or focus **Color Contrast** A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability WCAG 1.4.3: Contrast (minimum) **Responsive**  The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow ### Requirements for use **Title** Because the title of each accordion panel serves effectively as the label for the accordion button, this title should clearly describe the content that will be revealed when the accordion is expanded. By doing so, the title acts as an accessible name WCAG 4.1.2: Name, Role Value which is announced by screen readers, helping users understand the function of the accordion button and the nature of the content it controls. The title should be concise yet descriptive enough to guide users through navigation and interaction. WCAG 2.4.6: Headings and Labels **Body Text** Write body text in clear and simple language. Avoid jargon, idioms, or complex language structures. WCAG: 3.1.5: Reading Level Use descriptive link text for any inline links within the accordion. The link text should clearly indicate the destination or action. WCAG 2.4.4: Link Purpose (In Context) **Link** Use effective text to describe what the link is and where it is taking the user. This should be clear, descriptive text that conveys the link content succinctly and the purpose and destination of the link. WCAG 2.4.9: Link Purpose (Link Only)Example of effective text (preferred): Learn more about Innovate MarylandExample of generic text (avoid): Learn moreDisclaimer: If the visible link text is not sufficiently descriptive, you can use an aria-label attribute to provide additional context for screen reader users. The aria-label should clearly describe the link's purpose and destination.If the visible text is not necessary for screen readers (e.g., it's redundant or less descriptive), consider using aria-hidden="true" on the visible text element. This ensures that screen readers will prioritize the aria-label.Example with aria-label and aria-hidden:    This ensures that the link is accessible while maintaining concise visible text. ## Content Recommended character limits | Title | 60 characters (120 max) | ## Layout Accordions are preferable to tabs in situations where labels must be longer and there is not enough space for the total number of tabs needed.Accordions can be used standalone, whereas a tabs component should have at least two tabs. [View Figma design: Accordion](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=117-12286&t=1WoGk2vF0rJbQTl4-1) ## Guidelines Images should not be used in accordions.Lists, links, and rich text are allowed in accordions. There is no max-height for an open accordion section.The width of an accordion varies based on the layout and page design.By default, accordion items are closed. You can specify if any of the items should be open by default.The entire accordion bar can be clicked to open or close it, rather than limiting this action solely to the icon.