skills.rest
michelve
michelveCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility

Implement WCAG 2.2 AA and AAA standards in React 19 with shadcn/ui and Tailwind CSS.

1|Updated Mar 16, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#wcag#aria#vpats
One-click install
npx skills add https://github.com/michelve/hugin-cowork --skill accessibility-michelve
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/michelve/hugin-cowork/tree/main/skills/accessibility
Command: npx skills add https://github.com/michelve/hugin-cowork --skill accessibility-michelve

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

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

Core Features & Use Cases

  • WCAG Compliance: Implement and audit against Web Content Accessibility Guidelines (WCAG) 2.2 AA standards.
  • Keyboard Navigation: Ensure all interactive elements are fully operable via keyboard.
  • ARIA Implementation: Correctly use ARIA roles, states, and properties for custom components.
  • Screen Reader Support: Guarantee compatibility with NVDA, JAWS, VoiceOver, TalkBack, and Narrator.
  • Use Case: You're building a custom dropdown menu and need to ensure it's fully navigable with arrow keys and usable by screen readers. This Skill provides the patterns and guidance to achieve that.

Quick Start

Use the accessibility skill to fix keyboard navigation for a custom dropdown menu.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make a custom React dropdown menu accessible with keyboard navigation and ARIA?▼

To make a custom React dropdown menu accessible, implement keyboard navigation using arrow keys and apply correct ARIA attributes for screen reader compatibility. This Skill provides specific patterns for shadcn/ui and Tailwind CSS to ensure full operability and semantic compliance.

What WCAG 2.2 AA contrast and touch target requirements do I need to meet for web accessibility?▼

WCAG 2.2 AA requires specific color contrast ratios and minimum touch target sizes for web accessibility. This Skill audits and addresses common failures like poor target sizes and contrast issues, providing implementation guidance for React 19 applications.

Does this Skill work with shadcn/ui and Tailwind CSS for screen reader compatibility?▼

Yes, this Skill works with shadcn/ui and Tailwind CSS to ensure screen reader compatibility across NVDA, JAWS, VoiceOver, TalkBack, and Narrator. It provides the necessary ARIA roles, states, and properties for custom components built in this stack.

How do I run automated accessibility testing with axe-core in my web application?▼

To run automated accessibility testing with axe-core, integrate the library into your testing workflow to identify WCAG 2.2 violations like missing autocomplete attributes and semantic HTML issues. This Skill outlines the setup and execution for comprehensive auditing.

Why does my custom component fail screen reader and keyboard navigation accessibility checks?▼

Custom components fail screen reader and keyboard navigation checks due to missing ARIA attributes, incorrect autocomplete attributes, or poor focus management. This Skill provides the patterns to fix inaccessible custom components and ensure semantic HTML compliance.

How do I document VPAT compliance for a WCAG 2.2 AAA web application?▼

To document VPAT compliance for a WCAG 2.2 AAA web application, compile the accessibility audit results against the Web Content Accessibility Guidelines. This Skill provides guidance on generating VPAT documentation alongside the implementation and testing process.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
SensLiaoSensLiao

qa-a11y-compliance

Scan web applications for WCAG 2.2 AA accessibility compliance.

Community
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
tuliopc23tuliopc23

axiom-accessibility-diag

Diagnose iOS and macOS accessibility violations with remediation strategies and code examples.

Community
Advanced