elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

1|Updated Feb 3, 2026

Search Tags:#accessibility #wcag #motion #keyboard-navigation #focus-management #prefers-reduced-motion

Ready to run

npx skills add https://github.com/RSHVR/elite-web-design --skill elite-accessibility

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: elite-accessibility
Source: https://github.com/RSHVR/elite-web-design/tree/main/skills/elite-accessibility
Command: npx skills add https://github.com/RSHVR/elite-web-design --skill elite-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Motion accessibility patterns ensure web animations remain usable for people with motion sensitivity, vestibular disorders, and other accessibility needs by guiding reduced-motion strategies, focus management, keyboard navigation, and screen reader considerations.

Core Features & Use Cases

Provides CSS and GSAP patterns to respect prefers-reduced-motion and offer accessible fallbacks.
Covers contrast, focus indicators, skip links, touch targets, and ARIA practices for motion-rich interfaces.
Use Case: when designing motion-heavy components (carousels, parallax, scroll-driven reveals) to ensure WCAG compliance and inclusive UX; this skill also instructs on co-loading with elite-gsap or elite-css-animations.

Quick Start

Integrate these accessibility patterns into your animation workflow by consulting the references and applying the frontmatter guidance.

Frequently Asked Questions about elite-accessibility

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

FAQPage Schema

How do I make web animations accessible for users with motion sensitivity?▼

To make web animations accessible, you must integrate prefers-reduced-motion handling to provide accessible fallbacks for users with vestibular disorders or motion sensitivity. This ensures CSS and GSAP animations remain usable by offering reduced-motion strategies.

What WCAG compliance patterns are needed for motion-heavy components like carousels and parallax?▼

WCAG compliance for motion-heavy components requires accessible focus indicators, skip links, ARIA roles, and keyboard navigation patterns. Applying these motion accessibility patterns ensures scroll-driven reveals and parallax effects provide an inclusive UX.

How do I handle prefers-reduced-motion in GSAP and CSS animations?▼

Handle prefers-reduced-motion in GSAP and CSS by applying provided motion accessibility patterns that respect the user setting and offer accessible fallbacks. This approach ensures motion-rich interfaces degrade gracefully for users needing reduced motion.

Does this skill work with elite-gsap or elite-css-animations?▼

Yes, this skill explicitly instructs on co-loading with elite-gsap or elite-css-animations. You integrate these motion accessibility patterns into your animation workflow by consulting the references and applying the frontmatter guidance.

What focus management and keyboard navigation patterns ensure accessible web animations?▼

Accessible web animations require focus management and keyboard navigation patterns, including accessible focus indicators, skip links, and ARIA roles. These practices ensure motion-rich interfaces are navigable and comply with WCAG standards.