Тестирование доступности веб‑интерфейсов

🧩 AGENTS · Agent Skills intermediate ⭐ 82

Навык, который проводит проверку сайта на соответствие требованиям WCAG 2.1/2.2 и генерирует рекомендации по исправлению найденных проблем в UI‑компонентах и страницах.

Заполните поля:

Значения подставятся в промпт ниже.

name: accessibility-testing-superpower
description: |
  Выполняет аудит соответствия WCAG и предлагает исправления для веб‑страниц и интерактивных элементов.
use when: 1) проверка UI на соответствие WCAG 2.1/2.2; 2) исправление проблем с экранными читалками или клавиатурой; 3) правильное применение ARIA‑паттернов; 4) проверка контрастности и визуальной доступности; 5) создание доступных форм и виджетов.

## Конфигурация
- WCAG‑уровень: ${wcag_level:AA}
- Тестируемый элемент: ${component_name:Page}
- Стандарт: ${compliance_standard:WCAG 2.1}
- Минимальный Lighthouse‑балл: ${lighthouse_score:90}
- Основной читалка: ${screen_reader:NVDA}
- Тест‑фреймворк: ${test_framework:jest-axe}

## Алгоритм проверки
1. Получен запрос на проверку →
2. Новый компонент? → автоматический скан (axe‑core, Lighthouse) → тест клавиатурной навигации → проверка объявлений читалкой → проверка контрастности.
3. Есть известное нарушение? → определить критерий WCAG → попытаться решить семантическим HTML → добавить ARIA только при необходимости → подтвердить исправление с помощью AT.
4. Полный аудит? → автоматический скан (выявляет ~30% проблем) → чек‑лист ручного теста → документировать нарушения по тяжести → составить план исправления.

## Краткая таблица тяжести
| Серьёзность | Пример | Срок исправления |
|-------------|--------|-----------------|
| Критический | отсутствие фокуса, пустые кнопки | немедленно |
| Серьёзный   | плохой контраст, отсутствие меток форм | в текущем спринте |
| Средний     | непоследовательная навигация | в следующем релизе |
| Низкий      | избыточный alt‑текст | в бэклоге |
#accessibility#wcag#testing#audit

💡 Как выжать максимум

  • Всегда начинайте с автоматического скана, а затем дополняйте результаты ручным тестированием.
  • Если проблема решается чистым HTML, избегайте добавления ARIA‑атрибутов – они могут усложнить поддержку.
  • Проверяйте контрастность не только в светлой, но и в тёмной теме, если ваш продукт поддерживает её.
  • Сохраняйте журнал найденных нарушений с указанием критериев WCAG – это ускорит будущие аудиты.
Пример применения

Для новой формы регистрации вы задаёте ${wcag_level:AA}, выбираете компонент "RegistrationForm" и запускаете тест. Инструмент выявил отсутствие label у поля email и низкий контраст кнопки «Отправить», после чего предлагает добавить <label> и увеличить цветовую разницу.

Вариации этого промпта:
  • Аудит доступности мобильного приложения с учётом WCAG 2.2 и VoiceOver.
  • Проверка соответствия веб‑компонентов ARIA‑руководству и рекомендациям MDN.
  • Создание чек‑листа доступности для команд разработки с приоритетом критических ошибок.

Кураторская подборка fizoni.com · структура, примеры использования и рабочие сценарии

Похожие промпты

💡 Понравился этот промпт?

📦 AI Agent Skills Pack — 194 промптов

Вместо одного промпта — целый набор по теме. Готовые процессы, структура, быстрый старт. Системные промпты, скиллы агентов, воркфлоу и автоматизация.…

Забрать набор — $4.99 🎁 6 бесплатных промптов

Всего $4.99 · мгновенный доступ · оплата картой

🎁 Забери 6 лучших промптов бесплатно

Понравился этот промпт? Мы собрали ещё 6 отборных — для бизнеса, кода и продуктивности. Плюс доступ к полной библиотеке 2000+ промптов.