skills.rest
coastdigitalgroup
coastdigitalgroupOFFICIAL
Explore all skills by this author →
GitHub

accessible-accordion-implementation

Implement accessible accordion widgets with ARIA and keyboard navigation.

2|Updated Mar 21, 2026
Search Tags:#a11y#keyboard#ui-patterns#aria#accessible#accordion#disclosure
One-click install
npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill accessible-accordion-implementation
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
haryelramalhoharyelramalho

building-components

Design accessible React UI components with composable, type-safe APIs.

Community
Advanced
dylantarredylantarre
38

aria-patterns

Implement accessible ARIA roles, states, and properties for interactive web components.

Community
Basic
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
Software-Design-ClubSoftware-Design-Club
1

Frontend Accessibility

Guide developers to implement accessible UI components with ARIA and keyboard navigation.

Official
Basic