accessibility-compliance — скилл для Claude Code: доступность
Скилл помогает проверять доступность интерфейсов и исправлять проблемы с клавиатурной навигацией, экранными дикторами и формами. Подключайте его при работе с WCAG 2.2.
/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflowsЧто делает accessibility-compliance
Скилл помогает создавать интерфейсы с учётом WCAG 2.2: добавлять клавиатурную навигацию, настраивать управление фокусом, подписывать поля форм и поддерживать экранные дикторы. Он также охватывает мобильную доступность, предпочтения по контрасту и движению, текстовые альтернативы и увеличение масштаба до 200%.
В описании есть распространённые проблемы и инструменты для проверок: axe DevTools, WAVE и Lighthouse для автоматического тестирования; VoiceOver, NVDA/JAWS и TalkBack для ручного. Подробные примеры находятся в references/details.md. Проверяйте интерфейс с клавиатурой и вспомогательными технологиями.
Скилл стоит подключить, если вы разрабатываете или проверяете доступные интерфейсы; для проекта без таких задач он добавит рекомендации, которые могут быть не нужны.
Какие задачи решает
- проверить интерфейс на нарушения доступности
- добавить клавиатурную навигацию в интерактивные компоненты
- настроить управление фокусом и его удержание
- связать поля форм с текстовыми метками
- поддержать VoiceOver и TalkBack
Примеры запросов агенту
- Проверь эту страницу на проблемы доступности по WCAG 2.2.
- Добавь клавиатурную навигацию и управление фокусом для этого компонента.
- Проверь подписи полей формы и поддержку экранных дикторов.
Как установить accessibility-compliance
1Через маркетплейс плагинов
/plugin marketplace add wshobson/agents/plugin install ui-design@claude-code-workflows2Через Skills CLI (Vercel)
npx skills add wshobson/agents --skill accessibility-compliance -a claude-code3Вручную: положить файлы
~/.claude/skills/accessibility-compliance/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/accessibility-compliance/
1Через Skills CLI (Vercel)
npx skills add wshobson/agents --skill accessibility-compliance -a codex2Вручную: положить файлы
.agents/skills/accessibility-compliance/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add wshobson/agents --skill accessibility-compliance -a cursor2Вручную: положить файлы
.cursor/skills/accessibility-compliance/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install wshobson/agents accessibility-compliance2Вручную: положить файлы
.github/skills/accessibility-compliance/SKILL.mdКомандой платформы
gemini skills install https://github.com/wshobson/agents --path plugins/ui-design/skills/accessibility-complianceВручную: положить файлы
.devin/skills/accessibility-compliance/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о accessibility-compliance
Как установить accessibility-compliance в Claude Code?
Выполните npx skills add wshobson/agents --skill accessibility-compliance -a claude-code. Скилл также можно установить через marketplace-команды Claude Code.
Что делает accessibility-compliance?
Помогает создавать и проверять интерфейсы с учётом WCAG 2.2, клавиатурной навигации, экранных дикторов и доступных форм.
Какие инструменты для проверки доступности описаны в скилле?
Для автоматических проверок перечислены axe DevTools, WAVE и Lighthouse. Для ручных — VoiceOver, NVDA/JAWS и TalkBack.
Исходный текст
SKILL.md · MIT
--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- # Accessibility Compliance Master accessibility implementation to create inclusive experiences that work for everyone, including users with disabilities. ## When to Use This Skill - Implementing WCAG 2.2 Level AA or AAA compliance - Building screen reader accessible interfaces - Adding keyboard navigation to interactive components - Implementing focus management and focus trapping - Creating accessible forms with proper labeling - Supporting reduced motion and high contrast preferences - Building mobile accessibility features (iOS VoiceOver, Android TalkBack) - Conducting accessibility audits and fixing violations ## Detailed patterns and worked examples Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient. ## Best Practices 1. **Use Semantic HTML**: Prefer native elements over ARIA when possible 2. **Test with Real Users**: Include people with disabilities in user testing 3. **Keyboard First**: Design interactions to work without a mouse 4. **Don't Disable Focus Styles**: Style them, don't remove them 5. **Provide Text Alternatives**: All non-text content needs descriptions 6. **Support Zoom**: Content should work at 200% zoom 7. **Announce Changes**: Use live regions for dynamic content 8. **Respect Preferences**: Honor prefers-reduced-motion and prefers-contrast ## Common Issues - **Missing alt text**: Images without descriptions - **Poor color contrast**: Text hard to read against background - **Keyboard traps**: Focus stuck in component - **Missing labels**: Form inputs without associated labels - **Auto-playing media**: Content that plays without user initiation - **Inaccessible custom controls**: Recreating native functionality poorly - **Missing skip links**: No way to bypass repetitive content - **Focus order issues**: Tab order doesn't match visual order ## Testing Tools - **Automated**: axe DevTools, WAVE, Lighthouse - **Manual**: VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android) - **Simulators**: NoCoffee (vision), Silktide (various disabilities)
© Seth Hobson · MIT · wshobson/agents
