skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

tailwindcss-accessibility

Implement WCAG 2.2 accessibility patterns in Tailwind interfaces with ARIA attributes.

Updated Mar 26, 2026
Search Tags:#accessibility#wcag 2.2#tailwindcss#focus management#aria#touch targets
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill tailwindcss-accessibility-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-accessibility
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/tailwindcss-accessibility
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill tailwindcss-accessibility-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you implement accessible Tailwind UI patterns so your app supports keyboard navigation, screen readers, sufficient contrast, and WCAG 2.2-compliant touch targets (especially on mobile).

Core Features & Use Cases

  • Focus management & visible focus: Use focus-visible, focus rings, focus-within, and focus trap patterns for modals/dialogs to satisfy focus-related WCAG requirements.
  • Screen reader support: Apply sr-only, role="status", role="alert", and ARIA labeling patterns to make dynamic and contextual UI understandable.
  • Color contrast guidance: Choose safe foreground/background combinations and verify focus indicator contrast, including dark mode considerations.
  • Reduced motion support: Respect motion-reduce so animations don’t harm motion-sensitive users.
  • Touch target compliance (WCAG 2.2): Enforce minimum target sizes (24x24 AA, 44x44 recommended/AAA) and spacing between interactive elements with Tailwind utilities.
  • Form accessibility & validation states: Pair labels with inputs, use aria-invalid, aria-describedby, role="alert", and accessible error feedback patterns.
  • Accessible interactive components: Provide ARIA-ready patterns for buttons, dropdown menus, tabs, and icon-only controls with correct states (e.g., aria-expanded, aria-selected).

Quick Start

Use the tailwindcss-accessibility skill to audit and refactor your existing components by applying focus-visible rings, sr-only labels, ARIA roles for dynamic UI, WCAG 2.2 touch target sizing, and accessible form error/validation states across your Tailwind templates.

Frequently Asked Questions about tailwindcss-accessibility

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

FAQPage Schema
How do I make Tailwind UI components meet WCAG 2.2 accessibility requirements?▼

You can meet WCAG 2.2 accessibility requirements in Tailwind by applying focus-visible rings, sr-only screen-reader labels, ARIA attributes, motion-reduce variants, and minimum touch target sizing utilities to your interactive UI elements.

What is the minimum touch target size for WCAG 2.2 compliance in Tailwind?▼

The minimum touch target size for WCAG 2.2 compliance is 24x24 pixels for AA conformance, while 44x44 pixels is recommended for AAA conformance. You can enforce these dimensions and spacing between interactive elements using Tailwind utilities.

How do I implement accessible focus management for modals in Tailwind CSS?▼

Implement accessible focus management for modals in Tailwind CSS by using focus-visible, focus rings, focus-within utilities, and focus trap patterns. This ensures keyboard navigation remains within the dialog and satisfies WCAG focus appearance criteria.

Can I use Tailwind utilities to add screen reader semantics and ARIA attributes?▼

Yes, you can use Tailwind utilities like sr-only alongside role="status", role="alert", and ARIA labeling patterns to make dynamic and contextual UI understandable for screen readers across your React or HTML stack.

Does this accessibility approach work with any HTML and Tailwind stack or only Next.js?▼

This accessibility approach works with any HTML and Tailwind stack, not just Next.js. The WCAG 2.2-compliant patterns using focus-visible, sr-only, and motion-reduce variants are applicable across any Tailwind-based interface environment.

How do I handle form validation states accessibly using Tailwind?▼

Handle form validation states accessibly using Tailwind by pairing labels with inputs, applying aria-invalid and aria-describedby attributes, and using role="alert" to provide accessible error feedback patterns for user input validation.

Related Skills

Explore More Design & Creative Skills→
JosiahSiegelJosiahSiegel
51

tailwindcss-accessibility

Provide Tailwind CSS utility classes for WCAG 2.2 accessibility features.

Community
Intermediate
VanhPokerVanhPoker

accessibility-expert

Identify and fix WCAG 2.1/2.2 accessibility violations in web interfaces.

Community
Advanced
javierhbrjavierhbr

shadcn-code-review

Review React components using shadcn/ui, Radix primitives, and Tailwind CSS for best practices.

Community
Intermediate
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced