skills.rest
ChoreShore
ChoreShoreOFFICIAL
Explore all skills by this author →
GitHub

aria-patterns

Apply ARIA roles, states, and properties to interactive components.

Updated Feb 10, 2026
Search Tags:#accessibility#widgets#screen-reader#keyboard-navigation#web-accessibility#aria-patterns
One-click install
npx skills add https://github.com/ChoreShore/Version1 --skill aria-patterns-choreshore
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aria-patterns
Source: https://github.com/ChoreShore/Version1/tree/main/.windsurf/skills/aria-patterns
Command: npx skills add https://github.com/ChoreShore/Version1 --skill aria-patterns-choreshore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides practical guidance for applying ARIA roles, states, and properties to interactive UI components to improve accessibility and screen reader support.

Core Features & Use Cases

  • ARIA patterns for common widgets (buttons, dialogs, tabs, accordions, dropdowns, tooltips, combobox) with sample markup and keyboard behavior.
  • Guidance on when to use native HTML versus ARIA roles to preserve semantics and accessibility.
  • Real-world scenarios such as building custom widgets, ensuring keyboard support, and fixing screen reader issues across dynamic content.

Quick Start

Create an accessible modal dialog with role="dialog", aria-modal="true", focus management, and a descriptive label.

Frequently Asked Questions about aria-patterns

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

FAQPage Schema
How do I add ARIA roles to custom widgets for screen reader support?▼

You can add ARIA roles to custom widgets by applying correct roles, states, and properties to interactive components, ensuring screen readers properly announce dynamic content and custom UI elements.

What is the best way to implement keyboard navigation for an accessible modal dialog?▼

The best way to implement keyboard navigation for a modal dialog is using role="dialog", aria-modal="true", focus management, and a descriptive label to trap focus and guide screen reader users.

When should I use native HTML elements instead of ARIA attributes for web accessibility?▼

You should use native HTML elements instead of ARIA attributes whenever possible to preserve semantics and accessibility, relying on ARIA only when building custom widgets that lack native HTML equivalents.

How do I fix screen reader issues with dynamic content in tabs and accordions?▼

Fix screen reader issues in dynamic tabs and accordions by applying correct ARIA roles, states, and properties, ensuring proper labeling, focus management, and keyboard behavior for interactive UI components.

Does using ARIA roles on dropdowns and comboboxes require specific keyboard behavior?▼

Yes, using ARIA roles on dropdowns and comboboxes requires specific keyboard behavior, providing patterns and examples to ensure interactive widgets remain fully navigable via keyboard alongside screen reader support.

Related Skills

Explore More Software Engineering Skills→
TheNordicOneTheNordicOne
9

semantic-html

Guide semantic HTML authoring with landmarks and Baseline 2024 elements.

Community
Intermediate
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
khrorekhrore

web-component-design

Standardize reusable UI component creation across React, Vue, and Svelte.

Community
Advanced
pascallammerspascallammers
1

accessibility-wcag

Ensure web applications meet WCAG 2.1/2.2 accessibility standards.

Community
Intermediate