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

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

Функции

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

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

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

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

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

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

Предпосылки

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

• нпм

Установка

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

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

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

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

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

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

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

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

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

• MCP_OUTPUT_DIR : Каталог, в котором будут сохраняться результаты снимков экрана.

  • Требуется для инструмента simulate_colorblind

  • Если не указано, по умолчанию используется «./output» относительно текущего рабочего каталога.

  • При настройке в настройках MCP должен быть указан абсолютный путь.

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

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

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

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

Параметры

• url (обязательно): URL для анализа

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

• userAgent (необязательно): Пользовательская строка агента пользователя для запроса

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

Инструмент: 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 (необязательно): Пользовательская строка агента пользователя для запроса

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

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

check_accessibility Ответ

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

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

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

• Ошибки сети

• Недействительные URL-адреса

• Проблемы с тайм-аутом

• Проблемы с разрешением DNS

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

Разработка

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

Здание

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

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

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

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

Отладка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Внося вклад

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

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

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

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

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

Лицензия

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