accessible-accordion-implementation

Name: accessible-accordion-implementation
Availability: InStock
Author: CoastDigitalGroup

Implement accessible accordion widgets with ARIA and keyboard navigation.

2|Updated Mar 21, 2026

Search Tags:#a11y #keyboard #ui-patterns #aria #accessible #accordion #disclosure

Ready to run

npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill accessible-accordion-implementation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessible-accordion-implementation
Source: https://github.com/coastdigitalgroup/coastai-skills/tree/main/website-development/accessible-accordion-implementation
Command: npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill accessible-accordion-implementation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Solves the accessibility gap in accordion widgets by providing a clear blueprint for building usable disclosure components that work with screen readers and keyboard navigation.

Core Features & Use Cases

Semantic HTML markup with a button trigger, proper ARIA attributes, and region panels.
Keyboard interactions including Enter/Space toggling and optional arrow navigation.
Focus management and smooth, accessible transitions for open/closed panels.
Use cases include FAQs, progressive disclosure, mobile navigation, and compact toolbars.

Quick Start

Implement an accessible accordion by building a button trigger with aria-expanded, aria-controls, and a region panel, then wire toggle logic and keyboard support, and apply optional height transitions per the boilerplate.

Frequently Asked Questions about accessible-accordion-implementation

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

FAQPage Schema

How do I build an accessible accordion that works with screen readers?▼

Build accessible accordions by using a button trigger with aria-expanded and aria-controls attributes, paired with a region panel, to ensure screen readers correctly announce disclosure state changes.

What keyboard interactions do accessible disclosure components need?▼

Accessible disclosure components require Enter and Space keys to toggle panel visibility, with optional arrow key navigation for managing focus across multiple accordion headers within the same group.

How do I manage ARIA state for open and closed accordion panels?▼

Manage ARIA state by toggling the aria-expanded attribute on the button trigger to reflect true or false, ensuring the region panel's visibility accurately matches the disclosed state for assistive technologies.

Can I use accessible accordions for mobile navigation and FAQs?▼

Yes, accessible accordions are suitable for FAQs, progressive disclosure, mobile navigation, and compact toolbars, providing usable disclosure components that maintain screen reader and keyboard support across these workflows.

How do I add smooth transitions to accordion panels without breaking accessibility?▼

Add smooth transitions to accordion panels by applying optional height transitions during the open and closed states, ensuring focus management and ARIA state updates remain synchronized for assistive technology users.