A11y Feedback MCP

Дайте агентам кодинга и дизайна настоящий цикл обратной связи по доступности вместо очередного напоминания «следуйте WCAG».

a11y-feedback-mcp отображает интерфейс в Chromium, запускает axe-core и возвращает любому клиенту Model Context Protocol практические доказательства: нарушенные правила, степень влияния, CSS-селекторы, фрагменты DOM, вычисленные стили, ограничивающие прямоугольники, шаги по исправлению и математически проходящие кандидаты контраста.

Он работает напрямую с Codex и Claude Code. Для Claude Design надёжный рабочий процесс — подключить Claude Code к MCP-серверу Claude Design и к этому серверу, затем проверить сгенерированный HTML или живой предпросмотр и отправить исправления обратно через дизайн-процесс.

Это автоматизированное средство проверки, а не сервис сертификации WCAG. Он намеренно сообщает о неполных проверках и требует ручного тестирования клавиатуры, фокуса, программ чтения с экрана, масштабирования, движения, когнитивных аспектов и качества контента.

Что означает «живая обратная связь»

flowchart TD
    A["Agent creates or changes UI"] --> B["Render at target viewport"]
    B --> C["Run axe + contrast analysis"]
    C --> D["Return evidence and correction"]
    D --> E["Agent proposes or applies code fix"]
    E --> F["Re-run same audit"]
    F --> G["Human checks incomplete behavior"]

Сервер доступен только для чтения. Он никогда не изменяет проект молча. Подключённый агент использует полученные данные для внесения точечного изменения, а затем повторно запускает аудит для проверки.

Related MCP server: Accessibility MCP Server

Инструменты

Все инструменты помечены как доступные только для чтения. Сервер также предоставляет промпт accessibility-fix-loop.

Профили стандартов

Инструменты аудита поддерживают wcag2a, wcag2aa, wcag2aaa, wcag21aa, wcag21aaa, wcag22aa, wcag22aaa и best-practice. Профили AA включают все обязательные критерии A и AA; профили AAA включают A, AA и AAA. wcag22aa остаётся по умолчанию, поскольку W3C рекомендует последнюю версию WCAG и предостерегает от требования AAA для всего сайта как общей политики. Используйте AAA как явную улучшенную цель и сообщайте о прогрессе на уровне критериев.

Сопоставление с axe означает частичное автоматизированное покрытие, а не то, что полный критерий успеха был протестирован. get_wcag_checklist предоставляет все 55 критериев, требуемых для WCAG 2.2 AA, или все 86, требуемых для WCAG 2.2 AAA, включая ручную работу, которую автоматизация не может выполнить.

Требования

• Node.js 20 или новее

• Chrome или Edge рекомендуется

• Windows, macOS или Linux

Сервер сначала ищет установленные Chrome/Edge. В поддерживаемых средах Linux он может использовать встроенный @sparticuz/chromium. Вы можете задать A11Y_MCP_BROWSER_PATH с указанием явного исполняемого файла браузера. Песочница Chromium остаётся включённой по умолчанию; устанавливайте A11Y_MCP_NO_SANDBOX=true только для ограниченных контейнеров или сред выполнения в стиле Lambda, которые иначе не могут запустить Chrome.

Установка в Windows

Откройте PowerShell в папке, где вы храните проекты:

git clone https://github.com/aditya-ariosity/a11y-feedback-mcp.git
cd a11y-feedback-mcp
npm install
npm run build

Если репозитория ещё нет на GitHub, сначала загрузите или скопируйте эту папку, а затем выполните последние три команды внутри неё.

Подключение Codex

В PowerShell используйте абсолютный путь к собранной точке входа:

codex mcp add a11y-feedback -- node "C:\full\path\to\a11y-feedback-mcp\dist\index.js"

Или добавьте эквивалентную конфигурацию в ~/.codex/config.toml:

[mcp_servers.a11y_feedback]
command = "node"
args = ["C:\\full\\path\\to\\a11y-feedback-mcp\\dist\\index.js"]
startup_timeout_sec = 30
tool_timeout_sec = 90

[mcp_servers.a11y_feedback.env]
A11Y_MCP_ALLOWED_ROOT = "C:\\full\\path\\to\\your-projects"

Перезапустите Codex, затем спросите:

Проверьте эту страницу в 1440×900 и 390×844. Исправьте критические и серьёзные проблемы, повторите оба аудита и перечислите оставшиеся ручные проверки.

См. docs/codex.md для проверки и устранения неполадок.

Подключение Claude Code

claude mcp add --scope user a11y-feedback -- node "C:\full\path\to\a11y-feedback-mcp\dist\index.js"

Выполните claude mcp list, чтобы подтвердить подключение. См. docs/claude-code-and-design.md для рабочего процесса моста Claude Design.

Разработка

npm install
npm run check
npm test
npm run test:e2e
npm run build

npm test покрывает цветовую математику, защиту сети, исправление проблем и контракт MCP. npm run test:e2e запускает Chromium и проводит аудит специально недоступного тестового образца.

Запустите локальный stdio-сервер:

npm run dev

Запустите опциональный транспорт Streamable HTTP:

npm run build
npm run start:http

Конечная точка — http://127.0.0.1:3000/mcp; состояние — http://127.0.0.1:3000/health. HTTP по умолчанию привязывается к 127.0.0.1.

Переменные среды

Не открывайте эталонный HTTP-сервер напрямую в публичный интернет. Разместите перед ним аутентификацию, TLS, ограничения скорости, лимиты размера запросов и изоляцию клиентов. Прочтите docs/security.md.

Текущий охват

MVP охватывает отображаемые веб-интерфейсы и детерминированные расчёты контраста. Он пока не проверяет нативные мобильные приложения, PDF-файлы, канвасы, субтитры к видео или исходные пиксели Claude Design. Планируемые адаптеры смогут добавлять патчи с учётом фреймворков, помощь со скриншотами/OCR, интеграцию дизайн-токенов, аннотации в CI и полноценные коннекторы для дизайн-канвасов без изменения контракта MCP.

Документы проекта

• Архитектура и спецификация продукта

• Настройка Codex

• Настройка Claude Code и Claude Design

• Модель безопасности

• Модель покрытия W3C WAI

• Навык агента-компаньона

• Участие в разработке

Лицензия

MIT