accessibility-auditor
Аудит и исправление проблем веб-доступности
Также доступно от: CrazyDubya
Проблемы веб-доступности могут лишить пользователей с ограниченными возможностями доступа к вашему сайту. Этот навык предоставляет комплексное руководство по внедрению стандартов WCAG 2.1, ARIA-атрибутов и навигации с клавиатуры для создания инклюзивного опыта для всех пользователей.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «accessibility-auditor». Сделайте это навигационное меню доступным
Ожидаемый результат:
- Используйте элемент nav с aria-label для идентификации навигационной области
- Убедитесь, что все ссылки доступны для фокусировки с правильными значениями tabindex
- Добавьте навигацию с клавиатуры с помощью клавиш-стрелок для выпадающих меню
- Включите ссылку для пропуска повторяющейся навигации
- Убедитесь, что индикатор фокуса виден на всех интерактивных элементах
Использование «accessibility-auditor». Исправьте эту форму для обеспечения доступности
Ожидаемый результат:
- Добавьте явные элементы label с атрибутами for, соответствующими идентификаторам input
- Группируйте связанные поля с помощью fieldset и legend
- Используйте aria-required для обязательных полей
- Добавьте aria-invalid и aria-describedby для сообщений валидации
- Убедитесь, что сообщения об ошибках используют области aria-live
Аудит безопасности
БезопасноPure documentation skill containing only accessibility guidance, code examples, and best practices. All static findings are false positives: ARIA attributes (like aria-checked, aria-expanded) were misidentified as cryptographic algorithms; markdown code block backticks were misidentified as shell execution; legitimate W3C URLs are not security risks. No executable code, network calls, or credential access.
Факторы риска
🌐 Доступ к сети (3)
⚙️ Внешние команды (78)
Оценка качества
Что вы можете построить
Создание доступных компонентов
Создание доступных модальных окон, аккордеонов, вкладок и форм с правильными ARIA-атрибутами и управлением фокусом.
Аудит веб-доступности
Проверка веб-сайтов на нарушения WCAG с использованием включённого контрольного списка тестирования и рекомендаций по доступности.
Проектирование инклюзивных интерфейсов
Проектирование пользовательского опыта, совместимого с вспомогательными технологиями и соответствующего стандартам доступности.
Попробуйте эти промпты
Проверьте этот HTML-код на соответствие WCAG 2.1 AA. Проверьте отсутствие альтернативного текста, проблемы контрастности цветов и проблемы семантического HTML.
Помогите мне добавить правильные ARIA-атрибуты, чтобы сделать этот пользовательский компонент доступным. Это компонент выпадающего списка/модального окна/аккордеона.
Этот компонент недоступен для навигации с клавиатуры. Покажите мне, как реализовать правильный порядок табуляции и обработку событий клавиатury.
Какие тесты программы чтения с экрана мне следует выполнить, чтобы проверить доступность этой страницы для пользователей с нарушениями зрения?
Лучшие практики
- Начинайте тестирование доступности на ранних этапах разработки, а не исправляйте проблемы в конце
- Используйте семантические HTML-элементы перед добавлением ARIA-атрибутов
- Тестируйте с реальными вспомогательными технологиями, а не только с автоматизированными инструментами
Избегать
- Использование role="button" на div-элементах без надлежащей поддержки клавиатуры
- Использование текста-заполнителя в качестве замены видимых меток форм
- Использование только цвета для передачи информации пользователям