mcp-accessibility-scanner — MCP-сервер для Claude Code: аудит
Гоняет axe-проверки, обход по Tab и разбор дерева доступности прямо из агента. Пригодится, когда вёрстку нужно проверить до релиза.
claude mcp add mcp-accessibility-scanner -- npx -y mcp-accessibility-scannerЧто делает mcp-accessibility-scanner
Сервер поднимает браузер через Playwright и прогоняет страницу инструментами axe-core. Агент открывает адрес, сканирует разметку, жмёт Tab по интерактивным элементам и сохраняет находки в JSON — с деталями по узлам и ссылками на исправления. scan_page с annotateScreenshot: true дополнительно рисует полноэкранный PNG с пометками, а audit_screen_reader смотрит дерево доступности, имена элементов и геометрию. Настоящий скринридер он не запускает, так что ручная проверка остаётся.
Перед первым запуском поставьте Google Chrome: npm-пакет браузер не тянет. Установка идёт через npm install -g mcp-accessibility-scanner --allow-scripts=re2 — флаг нужен, чтобы собралась нативная зависимость re2. Без неё сервер падает с Cannot find module './build/Release/re2.node'. Если готового бинарника нет, потребуется тулчейн для сборки. Есть и образ на Docker Hub с Chromium внутри.
Дальше сервер прописывается в MCP-конфиг клиента как stdio-процесс с аргументами --headless, --isolated и --output-dir ./a11y-output. --isolated берёт свежий профиль, а не вашу личную сессию Chrome. Пути вывода считаются от рабочей директории сервера, поэтому при запуске из другого места указывайте абсолютный --output-dir. Автоматические проверки не заменяют сертификацию по WCAG — смотрите предупреждения о покрытии и непроверенные состояния страницы.
Какие задачи решает
- найти картинки без alt-текста на странице
- проверить контраст текста до релиза
- пройти по Tab и увидеть, где теряется фокус
- собрать JSON-отчёт по нарушениям для команды
- разобрать дерево доступности формы с подписями полей
Примеры запросов агенту
- Открой
http://localhost:3000и прогониscan_pageсannotateScreenshot: true - Пройди
audit_keyboardсmaxTabs: 30и покажи, где фокус уходит не туда - Запусти
audit_screen_readerи проверь доступные имена у кнопок
Как установить mcp-accessibility-scanner
Командой платформы
claude mcp add mcp-accessibility-scanner -- npx -y mcp-accessibility-scannerКомандой платформы
codex mcp add mcp-accessibility-scanner -- npx -y mcp-accessibility-scannerФайл настроек
{
"mcpServers": {
"mcp-accessibility-scanner": {
"command": "npx",
"args": [
"-y",
"mcp-accessibility-scanner"
]
}
}
}Файл настроек
{
"servers": {
"mcp-accessibility-scanner": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-accessibility-scanner"
]
}
}
}Командой платформы
gemini mcp add mcp-accessibility-scanner npx -y mcp-accessibility-scannerПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о mcp-accessibility-scanner
Как установить mcp-accessibility-scanner в Claude Code?
Выполните claude mcp add mcp-accessibility-scanner -- npx -y mcp-accessibility-scanner, затем перезапустите или переподключите клиент.
Что делает mcp-accessibility-scanner?
Открывает страницу в браузере и прогоняет проверки axe-core: контраст, ARIA, формы, навигацию с клавиатуры. Находки возвращаются текстом и сохраняются в JSON-отчёты.
Что нужно для работы сервера?
Установленный Google Chrome — npm-пакет браузер не ставит. Плюс нативная зависимость re2, поэтому при глобальной установке нужен флаг --allow-scripts=re2.
