Веб-доступность MCP-сервера

Сервер MCP (Model Context Protocol), предоставляющий возможности анализа веб-доступности с использованием axe-core и Puppeteer.

Функции

Анализ веб-доступности любого URL с помощью axe-core
Имитация цветовой слепоты (протанопии, дейтеранопии, тританопии) с использованием цветовых матриц
Подробные отчеты о нарушениях доступности
Поддержка пользовательских агентов и селекторов
Отладочное ведение журнала для устранения неполадок
Комплексные проверки доступности на основе рекомендаций WCAG

Предпосылки

Node.js (v14 или выше)
нпм

Установка

Установка через Smithery

Чтобы автоматически установить сервер веб-доступности MCP для Claude Desktop через Smithery :

npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude

Ручная установка

Клонируйте репозиторий:

git clone [repository-url]
cd mcp-web-a11y

Установить зависимости:

npm install

Сборка сервера:

npm run build

Конфигурация

Добавьте сервер в файл настроек MCP (обычно он находится по адресу ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json ):

{
  "mcpServers": {
    "web-a11y": {
      "command": "node",
      "args": ["/path/to/mcp-web-a11y/build/index.js"],
      "disabled": false,
      "autoApprove": [],
      "env": {
        "MCP_OUTPUT_DIR": "/path/to/output/directory"
      }
    }
  }
}

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

MCP_OUTPUT_DIR : Каталог, в котором будут сохраняться результаты снимков экрана.
- Требуется для инструмента simulate_colorblind
- Если не указано, по умолчанию используется «./output» относительно текущего рабочего каталога.
- При настройке в настройках MCP должен быть указан абсолютный путь.

Использование

Сервер предоставляет два инструмента: check_accessibility для анализа доступности веб-сайтов и simulate_colorblind для моделирования дальтонизма.

Инструмент: check_accessibility

Проверяет доступность указанного URL-адреса с помощью axe-core.

Параметры

url (обязательно): URL для анализа
waitForSelector (необязательно): селектор CSS, которого следует ожидать перед анализом
userAgent (необязательно): Пользовательская строка агента пользователя для запроса

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

<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>check_accessibility</tool_name>
<arguments>
{
  "url": "https://example.com",
  "waitForSelector": ".main-content",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}
</arguments>
</use_mcp_tool>

Инструмент: simulation_colorblind

Имитирует то, как веб-страница выглядит для пользователей с различными типами дальтонизма, используя преобразования цветовой матрицы.

Типы дальтонизма

Инструмент поддерживает три типа моделирования дальтонизма:

Протанопия (слепота к красному цвету) - Использует матрицу:
0.567, 0.433, 0 0.558, 0.442, 0 0, 0.242, 0.758
Дейтеранопия (зеленая слепота) — использует матрицу:
0.625, 0.375, 0 0.7, 0.3, 0 0, 0.3, 0.7
Тританопия (сине-слепота) — использует матрицу:
0.95, 0.05, 0 0, 0.433, 0.567 0, 0.475, 0.525

Параметры

url (обязательно): URL для захвата
type (обязательно): Тип дальтонизма для имитации («протанопия», «дейтеранопия» или «тританопия»).
outputPath (необязательно): Пользовательский путь для вывода скриншота.
userAgent (необязательно): Пользовательская строка агента пользователя для запроса

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

<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>simulate_colorblind</tool_name>
<arguments>
{
  "url": "https://example.com",
  "type": "deuteranopia",
  "outputPath": "colorblind_simulation.png"
}
</arguments>
</use_mcp_tool>

Формат ответа

check_accessibility Ответ

{
  "url": "analyzed-url",
  "timestamp": "ISO-timestamp",
  "violations": [
    {
      "impact": "serious|critical|moderate|minor",
      "description": "Description of the violation",
      "help": "Help text explaining the issue",
      "helpUrl": "URL to detailed documentation",
      "nodes": [
        {
          "html": "HTML of the affected element",
          "failureSummary": "Summary of what needs to be fixed"
        }
      ]
    }
  ],
  "passes": 42,
  "inapplicable": 45,
  "incomplete": 3
}

симулировать_дальтонизм Ответ

{
  "url": "analyzed-url",
  "type": "colorblind-type",
  "outputPath": "path/to/screenshot.png",
  "timestamp": "ISO-timestamp",
  "message": "Screenshot saved with [type] simulation"
}

Обработка ошибок

Сервер включает в себя комплексную обработку ошибок для распространенных сценариев:

Ошибки сети
Недействительные URL-адреса
Проблемы с тайм-аутом
Проблемы с разрешением DNS

Ответы об ошибках будут включать подробные сообщения, которые помогут диагностировать проблему.

Разработка

Структура проекта

mcp-web-a11y/
├── src/
│   └── index.ts    # Main server implementation
├── build/          # Compiled JavaScript
├── output/         # Generated screenshots
├── package.json    # Project dependencies and scripts
└── tsconfig.json   # TypeScript configuration

Здание

npm run build

Это позволит:

Компилировать TypeScript в JavaScript
Сделать выходной файл исполняемым
Поместите скомпилированные файлы в каталог build

Отладка

Сервер включает в себя подробное отладочное логирование, которое можно наблюдать в выводе консоли. Это включает в себя:

Сетевые запросы и ответы
Статус загрузки страницы
Статус ожидания селектора
Любые консольные сообщения с анализируемой страницы
Прогресс моделирования цвета

Распространенные проблемы и решения

Ошибки тайм-аута
- Увеличьте значение тайм-аута в коде
- Проверьте сетевое подключение
- Убедитесь, что URL доступен.
Ошибки разрешения DNS
- Проверьте правильность URL-адреса.
- Проверьте сетевое подключение
- Попробуйте использовать поддомен www
Селектор не найден
- Убедитесь, что селектор существует на странице.
- Дождитесь загрузки динамического контента.
- Проверьте исходный код страницы на наличие правильного селектора.
Проблемы с симуляцией цвета
- Убедитесь, что цвета страницы указаны в поддерживаемом формате (RGB, RGBA или HEX)
- Проверьте, использует ли страница динамическую смену цветов (может потребоваться дополнительное время ожидания)
- Убедитесь, что выходной каталог скриншота существует и доступен для записи.

Внося вклад

Форк репозитория
Создать ветку функций
Примите ваши изменения
Нажмите на ветку
Создать запрос на извлечение

Лицензия

Данный проект лицензирован по лицензии MIT — подробности см. в файле LICENSE .

Web Accessibility MCP Server

Integrations