AIKraft/AI/Войти
AIKraft/Skills/a11y-debugging

a11y-debugging

Использует Chrome DevTools MCP для отладки и аудита доступности (a11y) по стандартам web.dev. Применяется при проверке семантического HTML, ARIA-меток, фокуса, навигации с клавиатуры, кликабельных элементов и контрастности цветов.

GOGoogle official Разработка ★ 53k

Что делает навык

Использует Chrome DevTools MCP для отладки и аудита доступности (a11y) веб-страниц по стандартам web.dev. Проверяет семантический HTML, ARIA-метки, фокус, навигацию с клавиатуры, кликабельные элементы и контрастность цветов.

Когда применять

  • Автоматизированный аудит доступности с помощью Lighthouse для получения базового уровня и рекомендаций.
  • Анализ дерева доступности (accessibility tree) через take_snapshot для проверки того, как элементы видны вспомогательным технологиям.
  • Исследование конкретных руководств по доступности на web.dev с помощью формата .md.txt.
  • Проверка различий в поведении скрытых элементов (opacity: 0, display: none, aria-hidden) для скринридеров.

Как работает

  1. Получить доступные идентификаторы страниц (pageId) с помощью list_pages или new_page.
  2. Запустить аудит доступности Lighthouse (lighthouse_audit) для получения общего балла и списка нарушений.
  3. Использовать take_snapshot для получения дерева доступности страницы, которое является источником истины для семантической структуры.
  4. При необходимости исследовать руководства web.dev, добавляя .md.txt к URL для получения чистого Markdown.
  5. Анализировать различия между видимым DOM и деревом доступности для выявления проблем с скрытием элементов.

Примеры запросов агенту

Запусти аудит доступности Lighthouse для текущей страницы.
Проверь, как скринридеры видят эту кнопку, используя take_snapshot.
Найди рекомендации по доступным целевым областям на web.dev.

Что понадобится

  • Chrome DevTools MCP
  • Доступ к странице (pageId)
  • Доступ к интернету для загрузки документации web.dev

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «a11y-debugging» из репозитория: # https://github.com/chromedevtools/chrome-devtools-mcp
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r a11y-debugging/ ~/.claude/skills/a11y-debugging/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.