skills.rest
doanchienthangdev
doanchienthangdevCOMMUNITY
Explore all skills by this author →
GitHub

implementing-accessibility

Implement WCAG 2.1 AA compliant React interfaces with ARIA and keyboard navigation.

4|1|Updated Dec 30, 2025
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#react#wcag#aria
One-click install
npx skills add https://github.com/doanchienthangdev/omgkit --skill implementing-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implementing-accessibility
Source: https://github.com/doanchienthangdev/omgkit/tree/main/plugin/skills/frontend/accessibility
Command: npx skills add https://github.com/doanchienthangdev/omgkit --skill implementing-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures web interfaces are usable by everyone, regardless of ability, by adhering to accessibility standards and best practices.

Core Features & Use Cases

  • Semantic HTML: Guides the use of correct HTML elements for structure and meaning.
  • ARIA Implementation: Provides patterns for enhancing custom components with ARIA roles, states, and properties.
  • Keyboard Navigation: Ensures all interactive elements are navigable and operable via keyboard.
  • Focus Management: Implements strategies for managing focus within complex components like modals and dialogs.
  • Live Regions: Facilitates the announcement of dynamic content changes to screen readers.
  • Testing: Integrates accessibility testing tools and methodologies.
  • Use Case: When developing a new modal dialog, use this Skill to ensure it's properly announced by screen readers, traps keyboard focus within its bounds, and can be closed using the Escape key.

Quick Start

Implement an accessible dialog component using React, ensuring proper ARIA attributes and keyboard trap functionality.

Frequently Asked Questions about implementing-accessibility

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

FAQPage Schema
How do I implement keyboard navigation and focus trapping in a React modal dialog?▼

To implement keyboard navigation in a React modal, you must trap focus within the dialog, manage tab order, and enable closing via the Escape key using proper ARIA attributes and focus management strategies.

What is the best way to ensure web interfaces meet WCAG 2.1 AA compliance?▼

Ensuring WCAG 2.1 AA compliance involves using semantic HTML for structure, implementing proper ARIA patterns, enabling full keyboard operability, and integrating accessibility testing tools to validate interfaces.

How do I make dynamic content changes announced by screen readers?▼

To announce dynamic content changes to screen readers, you implement ARIA live regions which automatically read out updated information without requiring the user to navigate away from their current focus.

Can I use semantic HTML and ARIA patterns to build accessible React components?▼

Yes, you can build accessible React components by combining correct semantic HTML elements for structural meaning with ARIA patterns to enhance custom interactive elements and ensure robust screen reader support.

Why does my custom interactive element fail keyboard accessibility tests?▼

Custom interactive elements fail keyboard accessibility tests when they lack proper ARIA roles, do not support standard keyboard navigation, or fail to manage focus correctly during user interaction.

Related Skills

Explore More Design & Creative Skills→
vladolaruvladolaru
6

accessible-frontend-dev

Implement ARIA, keyboard, and focus management patterns for React and HTML components.

Community
Advanced
artsmcartsmc

accessibility-specialist

Identify and remediate web accessibility issues for WCAG 2.1 AA compliance.

Community
Advanced
bipinksbipinks
3

accessibility-patterns

Apply WCAG 2.1 AA/AAA patterns to improve UI accessibility.

Community
Advanced
CenredJunCenredJun

web-accessibility

Implement WCAG 2.1 AA-compliant accessibility in React, Vue, Svelte, or vanilla JavaScript UI components.

Community
Intermediate