a11y-mcp-server

MCP-сервер для аудита доступности, поиска критериев WCAG и получения рекомендаций по исправлению. Уже устарел.

Функции

• a11y_lookup_wcag: Поиск критериев WCAG 2.2 по номеру, ключевому слову или уровню

• a11y_check_pattern: Анализ HTML-фрагментов на наличие распространенных проблем с доступностью

• a11y_suggest_fix: Получение шаблонов исправления с примерами кода «до/после»

• a11y_document_component: Генерация документации по доступности для 18+ типов компонентов пользовательского интерфейса

• a11y_audit_summary: Генерация профессиональных отчетов об аудите на основе списка проблем

Related MCP server: @accesslint/mcp

Локальная разработка

# Install dependencies
npm install

# Build
npm run build

# Run locally
npm start

# Server runs on http://localhost:8080
# Health check: http://localhost:8080/health
# MCP endpoint: http://localhost:8080/mcp

Развертывание в NFSN

Предварительные требования (для моего пути; у вас может отличаться):

1. Аккаунт NFSN с денежными средствами (начальный депозит ~$10)

2. Настроенный SSH-доступ

Шаги по настройке

1. Создание сайта в NFSN

1. Войдите в интерфейс участников NFSN

2. Sites → Create a New Site

3. Тип сайта: Custom (требуется для демона Node.js)

4. Запишите имя хоста вашего сайта (например, yoursite.nfshost.com)

2. Загрузка кода

# From project directory
rsync -avz --exclude node_modules --exclude .git --exclude dist \
  ./ USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net:/home/protected/a11y-mcp-server

3. Настройка SSH

ssh USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net

# Navigate to project
cd /home/protected/a11y-mcp-server

# Check Node.js version (should be 18+)
node --version

# Install dependencies
npm install --production

# Build
npm run build

# Make run.sh executable
chmod +x run.sh

# Test locally
./run.sh
# Ctrl+C to stop

4. Настройка демона NFSN

1. Перейдите в панель управления сайтом NFSN

2. Sites → Your Site → Site Information → Daemons

3. Добавьте демона:

   • Tag: node

   • Command Line: /home/protected/a11y-mcp-server/run.sh

   • Working Directory: /home/protected/a11y-mcp-server

5. Настройка прокси NFSN

1. Sites → Your Site → Site Information → Proxies

2. Добавьте прокси:

   • Protocol: http

   • Base URI: /mcp

   • Document Root: (оставьте пустым)

   • Target Port: 8080

6. Проверка развертывания

# Check health endpoint
curl https://yoursite.nfshost.com/health

# Test MCP endpoint
curl -X POST https://yoursite.nfshost.com/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","method":"tools/list","id":1}'

Устранение неполадок

Проверка логов демона:

ssh USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net
cat /home/protected/a11y-mcp-server/daemon.log

Перезапуск демона: Через панель управления NFSN: Sites → Daemons → Restart

Проверка работы демона:

ps aux | grep node

Настройка Claude Code

Добавьте в ~/.config/claude/claude_desktop_config.json:

{
  "mcpServers": {
    "a11y": {
      "url": "https://yoursite.nfshost.com/mcp"
    }
  }
}

Затем перезапустите Claude Code.

Локальное тестирование с Claude Code

Для тестирования перед развертыванием в NFSN запустите сервер локально и настройте Claude Code для подключения:

1. Запустите сервер:

npm start

2. Добавьте в ~/.config/claude/claude_desktop_config.json:

{
  "mcpServers": {
    "a11y-local": {
      "url": "http://localhost:8080/mcp"
    }
  }
}

3. Перезапустите Claude Code

Вопросы для оценки

Используйте эти вопросы, чтобы убедиться, что сервер работает правильно:

1. Поиск WCAG: «Какой критерий WCAG охватывает навигацию с клавиатуры и какой у него уровень?»

   • Ожидается: Возвращает 2.1.1 Keyboard (Level A) с подробной информацией

2. Шаблон исправления: «Какой шаблон исправления для отсутствующего alt-текста у декоративных изображений?»

   • Ожидается: Возвращает шаблон с примером пустого alt=""

3. Документация компонента: «Создай документацию по доступности для компонента модального диалога.»

   • Ожидается: Возвращает взаимодействие с клавиатурой, атрибуты ARIA, ожидания для программ чтения с экрана

4. Поиск WCAG 2.2: «Какие критерии WCAG 2.2 специфичны для мобильных/сенсорных взаимодействий?»

   • Ожидается: Возвращает критерии 2.5.x Input Modalities

5. Распространенные ошибки: «Какие распространенные ошибки для критерия 1.4.3 Contrast?»

   • Ожидается: Возвращает техники ошибок F24, F83

Примеры использования

Поиск критерия WCAG

Query: "What WCAG criterion covers keyboard navigation?"
Tool: a11y_lookup_wcag
Args: { "query": "keyboard" }

Проверка HTML на наличие проблем

Query: "Check this HTML for accessibility issues"
Tool: a11y_check_pattern
Args: { "html": "<img src='logo.png'><button><svg>...</svg></button>" }

Получение шаблона исправления

Query: "How do I fix missing alt text on decorative images?"
Tool: a11y_suggest_fix
Args: { "issueType": "missing-alt-decorative" }

Генерация документации компонента

Query: "Generate accessibility documentation for a modal dialog"
Tool: a11y_document_component
Args: { "componentType": "modal" }

Обновление данных WCAG

Критерии WCAG объединены в src/data/wcag-criteria.json. Чтобы обновить:

1. Отредактируйте JSON-файл с новыми критериями

2. Пересоберите: npm run build

3. Повторно разверните в NFSN

Лицензия

MIT