accessibility-compliance-accessibility-audit
Аудит веб-доступности с WCAG
Этот навык помогает разработчикам проводить комплексные аудиты соответствия WCAG с использованием автоматизированных инструментов и ручного тестирования для выявления барьеров доступности и предоставления рекомендаций по их устранению.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «accessibility-compliance-accessibility-audit». Run WCAG AA audit on example.com
Ожидаемый результат:
Результаты аудита доступности: Оценка 72/100. Критические проблемы: 3 (отсутствующий alt-текст, метки форм). Серьёзные проблемы: 5 (контраст, индикаторы фокуса). Предоставлены рекомендуемые исправления с примерами кода.
Использование «accessibility-compliance-accessibility-audit». How do I fix keyboard trap in modal?
Ожидаемый результат:
Для исправления клавиатурной ловушки: 1) Добавить обработчик клавиши Escape для закрытия модального окна. 2) Обеспечить возврат фокуса на элемент-триггер. 3) Захватить фокус внутри модального окна пока оно открыто. См. пример кода с React и ARIA.
Аудит безопасности
БезопасноSecurity review complete. All static findings are false positives. The skill provides legitimate accessibility testing examples using standard tools (axe-core, Puppeteer). No actual command injection, credential access, or malicious network requests present. Code examples are for local accessibility testing only.
Оценка качества
Что вы можете построить
Предрелизный аудит доступности
Проведение комплексного аудита доступности перед запуском веб-сайта для обеспечения соответствия WCAG AA и выявления барьеров.
Рекомендации по устранению
Получение пошаговых инструкций по исправлению конкретных нарушений доступности с примерами кода.
Обучение доступности
Изучение лучших практик навигации с клавиатуры, поддержки скринридеров и паттернов инклюзивного дизайна.
Попробуйте эти промпты
Run a WCAG AA accessibility audit on my website at [URL]. Identify the top issues and provide remediation steps.
Test the login form component for accessibility. Check for proper labels, keyboard navigation, error handling, and screen reader announcements.
I have [specific accessibility issue]. Provide detailed code examples to fix this using React and ARIA attributes.
Create a GitHub Actions workflow to run automated accessibility tests on every pull request using axe-core.
Лучшие практики
- Всегда тестируйте с реальными вспомогательными технологиями, а не только автоматизированными инструментами
- Приоритезируйте исправления по влиянию на пользователя (критичные > серьёзные > умеренные > незначительные)
- Документируйте решения по доступности и их обоснование в комментариях к коду
- Включите тестирование доступности в ваш CI/CD-пайплайн
Избегать
- Полная зависимость от автоматизированных инструментов без ручного тестирования
- Использование цвета как единственного способа передачи информации
- Установка tabindex > 0, которая нарушает логический порядок табуляции
- Добавление ARIA-атрибутов без понимания их значения