Тестирование доступности веб‑интерфейсов
Навык, который проводит проверку сайта на соответствие требованиям WCAG 2.1/2.2 и генерирует рекомендации по исправлению найденных проблем в UI‑компонентах и страницах.
The values will be inserted into the prompt below.
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‑текст | в бэклоге |
💡 Как выжать максимум
- Всегда начинайте с автоматического скана, а затем дополняйте результаты ручным тестированием.
- Если проблема решается чистым HTML, избегайте добавления ARIA‑атрибутов – они могут усложнить поддержку.
- Проверяйте контрастность не только в светлой, но и в тёмной теме, если ваш продукт поддерживает её.
- Сохраняйте журнал найденных нарушений с указанием критериев WCAG – это ускорит будущие аудиты.
Для новой формы регистрации вы задаёте ${wcag_level:AA}, выбираете компонент "RegistrationForm" и запускаете тест. Инструмент выявил отсутствие label у поля email и низкий контраст кнопки «Отправить», после чего предлагает добавить <label> и увеличить цветовую разницу.
- Аудит доступности мобильного приложения с учётом WCAG 2.2 и VoiceOver.
- Проверка соответствия веб‑компонентов ARIA‑руководству и рекомендациям MDN.
- Создание чек‑листа доступности для команд разработки с приоритетом критических ошибок.
Кураторская подборка fizoni.com · структура, примеры использования и рабочие сценарии
Similar prompts
Virtual Game Console Simulator
AI agent simulating a virtual game console with retro and modern games plus WhatsApp inter…
🧩 AGENTSUltrathinker
System prompt for an expert software developer combining analytical thinking with producti…
🧩 AGENTSSenior System Architect Agent
System prompt for a Senior System Architect agent to lead enterprise architecture planning…
🧩 AGENTSAI Agent Security Evaluation Checklist
Build a comprehensive security evaluation checklist for AI agents, chatflows, and workflow…
🧩 AGENTSGlyth_Maker
Paladin Octem system prompt simulating four rival research agents under Lord Nexus for adv…
🧩 AGENTSVR Headset Experience Simulator
Simulate a realistic VR headset experience with 360-degree views, interactive physics, and…
📦 AI Agent Skills Pack — 194 промптов
Вместо одного промпта — целый набор по теме. Готовые процессы, структура, быстрый старт. Системные промпты, скиллы агентов, воркфлоу и автоматизация.…
Забрать набор — $4.99 🎁 6 free prompts
🎁 Get the 6 best prompts for free
Liked this prompt? We've put together 6 more hand-picked ones — for business, code, and productivity. Plus access to the full library of 2000+ prompts.