skills.rest
alexejluft
alexejluftCOMMUNITY
Explore all skills by this author →
GitHub

building-disclosure-patterns

Build accessible disclosure widgets with ARIA roles and keyboard navigation.

Updated Aug 27, 2026
Search Tags:#accessibility#keyboard navigation#tabs#aria#dropdown#disclosure widget
One-click install
npx skills add https://github.com/alexejluft/brudi --skill building-disclosure-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-disclosure-patterns
Source: https://github.com/alexejluft/brudi/tree/main/skills/building-disclosure-patterns
Command: npx skills add https://github.com/alexejluft/brudi --skill building-disclosure-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating accessible and interactive disclosure widgets like tabs, custom dropdowns, and expandable sections, ensuring they function correctly with ARIA standards and keyboard navigation.

Core Features & Use Cases

  • ARIA Compliance: Implements correct ARIA roles and attributes for disclosure buttons, tabs, and dropdowns.
  • Keyboard Navigation: Provides robust keyboard support for all interactive elements.
  • Pattern Guidance: Differentiates between disclosure, accordion, and tab patterns for appropriate implementation.
  • Use Case: When building a website's FAQ section with expandable answers or a settings panel with collapsible options, this skill provides the blueprint for accessible implementation.

Quick Start

Use the building-disclosure-patterns skill to implement a tabbed interface with ARIA compliance and keyboard navigation.

Frequently Asked Questions about building-disclosure-patterns

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

FAQPage Schema
What is the difference between disclosure, accordion, and tab patterns for ARIA compliance?▼

Disclosure widgets show or hide associated content on demand, accordions manage vertically stacked collapsible sections, and tab patterns switch between panels where only one is visible. This Skill differentiates and guides appropriate ARIA implementation for each interactive pattern.

How do I build accessible tabs with keyboard navigation and ARIA roles?▼

Build accessible tabs by applying correct ARIA roles for tablist, tab, and tabpanel elements, and implementing robust keyboard navigation for arrow keys and activation. This Skill provides code examples and blueprints for compliant tabbed interfaces.

What ARIA attributes are needed for custom dropdown and expandable widgets?▼

Custom dropdown and expandable widgets require ARIA attributes like aria-expanded, aria-controls, and proper roles to communicate state to assistive technologies. This Skill provides blueprints for applying these attributes correctly.

Does this guidance cover keyboard support for disclosure buttons and expandable sections?▼

Yes, this Skill provides robust keyboard support guidance for disclosure buttons and expandable sections, ensuring interactive elements function correctly with ARIA standards and keyboard navigation for accessibility.

When should I use a disclosure widget instead of a tab pattern?▼

Use a disclosure widget when toggling visibility of a single associated content section, and use a tab pattern when switching between multiple panels where only one is visible at a time. This Skill clarifies appropriate pattern selection.

Related Skills

Explore More Design & Creative Skills→
rsmdtrsmdt
381

accessibility-standards

Apply WCAG 2.1 AA accessible design patterns to digital interfaces.

Community
Advanced
nattergabrielnattergabriel
2

accessibility

Identify and resolve accessibility gaps in web user interfaces using ARIA guidelines.

Community
Intermediate
JhabbigJhabbig

screen-reader-testing

Test web application accessibility with screen readers like VoiceOver and NVDA.

Community
Advanced
MolcajeteAIMolcajeteAI
2

radix-ui-patterns

Generate accessible Radix UI component patterns with TypeScript examples.

Official
Intermediate