Словами самого skill
Этот skill проводит аудит и исправляет веб-доступность по WCAG 2.2, опираясь на POUR — Perceivable, Operable, Understandable, Robust — и уровни соответствия A, AA и AAA. Его workflow строится на доказательствах: если отрисованная страница доступна, запускается живой аудит доступности Lighthouse (lighthouse_audit через Chrome DevTools MCP), сбойные узлы указывают на нужный компонент, его состояние доступности проверяется через take_snapshot, после чего правится исходный код и аудит повторяется.
Если живых инструментов нет, Lighthouse CLI или axe закрывают автоматическую половину работы, а те же ручные проверки всё равно остаются в силе. Skill поставляется с правилами уровня кода для alt-текста, коэффициентов контраста, видимости фокуса, размера цели, reduced motion, ошибок форм и доступной аутентификации, а также со списком триажа с рангами critical, serious и moderate.
Что он выдаёт
- Список проблем по приоритетам, разбитый на уровни Critical (исправить немедленно), Serious (исправить до запуска) и Moderate (исправить вскоре), с конкретными примерами.
- Исправленная разметка и готовые к вставке фрагменты, включая утилиту visually-hidden, открывающую подписи иконочных кнопок вспомогательным технологиям.
- Полные эталонные реализации в references/A11Y-PATTERNS.md: подписи полей форм, ловушка фокуса в модальных окнах, skip link, ARIA-табы, live-регионы, обработка ошибок и команды скринридеров.
Как это работает
- 01Запустите живой аудит доступности
Начните с отрисованной страницы и запустите живой аудит доступности Lighthouse: режим mobile navigation для общедоступных страниц или режим snapshot, когда перезагрузка потеряет состояние авторизации.
- 02Определите сбойный компонент
Используйте сбойные узлы аудита, чтобы указать на конкретный компонент или шаблон, а не искать по всему репозиторию общие паттерны через grep.
- 03Изучите дерево доступности
Прочитайте снимок отрисованного дерева доступности, чтобы проверить имена, роли, состояния, ориентиры и структуру заголовков, затем пройдите затронутый сценарий с клавиатуры.
- 04Исправьте исходный код и перепроверьте
Меняйте исходный код, а не отрисованный результат, затем повторите тот же аудит и то же ручное взаимодействие, чтобы подтвердить исправление.
- 05Запасной вариант — инструменты CLI
Когда живых браузерных инструментов нет, сочетайте вывод Lighthouse CLI или axe с теми же ручными проверками: автоматизация закрывает лишь часть барьеров.