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

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

Функции

• Анализ веб-доступности любого URL с помощью axe-core

• Имитация цветовой слепоты (протанопии, дейтеранопии, тританопии) с использованием цветовых матриц

• Подробные отчеты о нарушениях доступности

• Поддержка пользовательских агентов и селекторов

• Отладочное ведение журнала для устранения неполадок

• Комплексные проверки доступности на основе рекомендаций WCAG

Related MCP server: MCP Accessibility Scanner

Предпосылки

• Node.js (v14 или выше)

• нпм

Установка

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

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

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

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

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

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

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

npm install

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

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

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

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

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

1. Протанопия (слепота к красному цвету) - Использует матрицу:

   0.567, 0.433, 0
   0.558, 0.442, 0
   0, 0.242, 0.758

2. Дейтеранопия (зеленая слепота) — использует матрицу:

   0.625, 0.375, 0
   0.7, 0.3, 0
   0, 0.3, 0.7

3. Тританопия (сине-слепота) — использует матрицу:

   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

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

1. Компилировать TypeScript в JavaScript

2. Сделать выходной файл исполняемым

3. Поместите скомпилированные файлы в каталог build

Отладка

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

• Сетевые запросы и ответы

• Статус загрузки страницы

• Статус ожидания селектора

• Любые консольные сообщения с анализируемой страницы

• Прогресс моделирования цвета

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

1. Ошибки тайм-аута

   • Увеличьте значение тайм-аута в коде

   • Проверьте сетевое подключение

   • Убедитесь, что URL доступен.

2. Ошибки разрешения DNS

   • Проверьте правильность URL-адреса.

   • Проверьте сетевое подключение

   • Попробуйте использовать поддомен www

3. Селектор не найден

   • Убедитесь, что селектор существует на странице.

   • Дождитесь загрузки динамического контента.

   • Проверьте исходный код страницы на наличие правильного селектора.

4. Проблемы с симуляцией цвета

   • Убедитесь, что цвета страницы указаны в поддерживаемом формате (RGB, RGBA или HEX)

   • Проверьте, использует ли страница динамическую смену цветов (может потребоваться дополнительное время ожидания)

   • Убедитесь, что выходной каталог скриншота существует и доступен для записи.

Внося вклад

1. Форк репозитория

2. Создать ветку функций

3. Примите ваши изменения

4. Нажмите на ветку

5. Создать запрос на извлечение

Лицензия

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