How does it handle complex widgets like modals?

It provides standardized Stimulus controller logic for focus trapping, keyboard navigation shortcuts, and proper ARIA dialog attributes.

Does this skill support Hotwire and Turbo?

Yes, it includes specific patterns for aria-live regions and focus management designed to work seamlessly with Turbo Streams and Frames.

Can it help my Rails app reach WCAG 2.2 Level AA compliance?

Absolutely. The skill is based on WCAG 2.2 Level AA requirements, covering perceivability, operability, and robustness standards.

Is it compatible with Tailwind CSS?

Yes, the patterns include specific Tailwind CSS utility classes for focus rings, screen reader visibility (sr-only), and high-contrast modes.

Accessibility Patterns for Rails

Name: Accessibility Patterns for Rails
Author: Kaakati

byKaakati

•

Design Tools

Implements WCAG 2.2 Level AA compliant user interfaces in Rails applications using best-practice ARIA, keyboard navigation, and focus management patterns.

This skill equips Claude with specialized patterns to ensure Ruby on Rails applications meet strict accessibility standards. It provides implementation strategies for semantic HTML, ARIA roles, and keyboard-accessible widgets specifically tailored for modern Rails stacks including ViewComponents, Hotwire, and Tailwind CSS. By providing ready-to-use logic for screen reader support and focus trapping, it helps developers build inclusive enterprise-grade applications that comply with WCAG 2.2 Level AA guidelines while maintaining high development velocity.

Key Features

012 GitHub stars

02TailAdmin and Tailwind-compatible focus indicator and contrast patterns

03Stimulus-powered logic for focus trapping and roving tabindex patterns

04Accessible dynamic content updates via Turbo Streams and live regions

05ARIA role and relationship mapping for complex widgets and forms

06Comprehensive WCAG 2.2 Level AA implementation reference for Rails UI

Use Cases

01Remediating existing Rails UI components to meet accessibility compliance audits

02Implementing screen-reader-friendly validation feedback and status announcements

03Building accessible interactive components like modals, tabs, and dropdowns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kaakati/rails-enterprise-dev accessibility-patterns

For use in Claude.ai and ChatGPT

Download Skill