Accordion

Create expandable and collapsible content sections with keyboard and screen reader accessibility.

228|18|Updated Dec 7, 2024

Search Tags:#accessibility #faq #progressive disclosure #accordion #ui pattern #collapsible content

Ready to run

npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill accordion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Accordion
Source: https://github.com/thedaviddias/ux-patterns-for-developers/tree/main/skills/accordion
Command: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill accordion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps manage screen space and organize content by allowing users to expand and collapse sections, revealing information only when needed.

Core Features & Use Cases

Progressive Disclosure: Presents structured content in a manageable, interactive way.
Space Saving: Ideal for FAQs, settings, product details, and documentation where not all information needs to be visible at once.
Use Case: Displaying a list of frequently asked questions where each question and its answer are contained within a collapsible accordion item.

Quick Start

Use the accordion skill to create a collapsible section for frequently asked questions.

Frequently Asked Questions about Accordion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is progressive disclosure in UI design and when should I use it?▼

Progressive disclosure is a UI pattern that reveals information only when needed, optimizing screen space and user focus. It is ideal for FAQs, settings panels, and detailed product information where displaying all content at once would overwhelm users.

How do I make collapsible content sections accessible for keyboard and screen reader users?▼

Accessible collapsible content sections require adherence to accessibility standards for keyboard navigation and screen reader interaction. This ensures users can expand and collapse sections using standard keyboard commands while receiving proper auditory feedback on content state changes.

Can I use an accordion pattern for organizing frequently asked questions?▼

Yes, an accordion pattern is specifically suited for displaying FAQs where each question and its answer are contained within a collapsible accordion item. This structure allows users to scan questions and selectively expand only the answers they need.

What is the best way to organize settings panels and documentation without overwhelming the user?▼

The best way to manage settings panels and documentation is using expandable and collapsible content sections. This progressive disclosure approach presents structured content interactively, saving screen space and keeping user focus on relevant information.

Does this accordion UI pattern support screen reader interaction out of the box?▼

The accordion UI pattern requires adherence to accessibility standards for keyboard and screen reader interaction. It facilitates progressive disclosure while ensuring that expandable and collapsible content sections remain navigable for assistive technologies.