accessibility-issues
Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs
Best use case
accessibility-issues is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs
Teams using accessibility-issues should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/accessibility-issues/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How accessibility-issues Compares
| Feature / Agent | accessibility-issues | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Accessibility Issues
Make animations inclusive using Disney's principles thoughtfully.
## Problem Indicators
- Motion sickness complaints
- Vestibular disorder triggers
- Screen reader confusion
- Cognitive overload
- Seizure risk (flashing)
- Keyboard focus lost during animation
## Diagnosis by Principle
### Squash and Stretch
**Issue**: Excessive distortion causes disorientation
**Fix**: Reduce or eliminate squash/stretch for users with `prefers-reduced-motion`. Use opacity changes instead.
### Secondary Action
**Issue**: Too many moving elements
**Fix**: Limit to one animated element at a time. Secondary actions should be subtle or removed.
### Exaggeration
**Issue**: Dramatic motion triggers vestibular responses
**Fix**: Reduce scale, rotation, and position changes. Keep movements small and predictable.
### Timing
**Issue**: Animations too fast or too slow
**Fix**: Provide consistent, predictable timing. Avoid sudden speed changes.
### Arcs
**Issue**: Curved motion paths cause tracking difficulty
**Fix**: Use linear motion for essential UI. Save arcs for optional decorative elements.
## Quick Fixes
1. **Respect `prefers-reduced-motion`** - Always check and honor
2. **No autoplay animation** - Let users trigger motion
3. **Keep focus visible** - Never animate focus indicator away
4. **Announce changes** - Use ARIA live regions for dynamic content
5. **Provide pause controls** - For any looping animation
## Troubleshooting Checklist
- [ ] Does animation respect `prefers-reduced-motion`?
- [ ] Is there a way to pause/stop animations?
- [ ] Are state changes announced to screen readers?
- [ ] Does keyboard focus remain visible and logical?
- [ ] Is flash rate under 3 per second?
- [ ] Can users complete tasks without animation?
- [ ] Are animations triggered by user action (not autoplay)?
- [ ] Test with screen reader enabled
## Code Pattern
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
```js
// Check preference in JS
const prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
```Related Skills
accessibility
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
accessibility-wcag
Build accessible web applications following WCAG 2.1/2.2 guidelines with proper semantic HTML, ARIA attributes, keyboard navigation, screen reader support, and inclusive design. Use when implementing ARIA labels and roles, ensuring keyboard navigation, supporting screen readers, providing text alternatives for images, managing focus, creating accessible forms, building inclusive UI components, testing with accessibility tools, meeting WCAG compliance levels, or designing for users with disabilities.
accessibility-validation
Validate digital outputs for compliance with accessibility standards (e.g., WCAG, Section 508). Use when reviewing reports, dashboards, documents, or interfaces from pilot projects to identify and remediate accessibility barriers.
accessibility-ux-audit
Audit and enhance accessibility and UX across all pages and components.
accessibility-testing
WCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally.
accessibility-tester
Expert accessibility tester specializing in WCAG compliance, inclusive design, and universal access. Masters screen reader compatibility, keyboard navigation, and assistive technology integration with focus on creating barrier-free digital experiences.
accessibility-test-axe
Эксперт по a11y тестированию. Используй для axe-core, automated testing и accessibility audits.
accessibility-standards
Implement WCAG 2.1 accessibility standards for Vue 3 apps. Use when adding ARIA labels, keyboard navigation, screen reader support, or checking color contrast. Mentions "accessibility", "ARIA", "keyboard nav", "screen reader", or "color contrast".
accessibility-rules
Concise accessibility checklist and practices for components in the repository. Use when implementing UI to ensure keyboard, screen reader, and focus semantics.
accessibility-review
Reviews UI for accessibility issues against WCAG 2.1/2.2 AA. Triggers on "is this accessible?", "check accessibility", or contrast/a11y review requests.
accessibility-report
Generate accessibility compliance reports including VPAT and ACR documents
accessibility-remediation
Use this skill when the user writes/edits components, asks to "fix accessibility issues", "add ARIA labels", "improve accessibility", "check WCAG compliance", "remediate a11y violations", mentions "screen reader support", "keyboard navigation", or wants AI-powered accessibility fixes with one-click application. Automatically analyzes components for a11y issues and suggests context-aware fixes. Trigger on PostToolUse hook or explicit request.