Сервер MCP для тестирования веб-доступности (A11y MCP)
A11y MCP — это сервер MCP (Model Context Protocol), который предоставляет LLM-специалистам доступ к API-интерфейсам тестирования веб-доступности.
Этот сервер использует API Deque Axe-core и Puppeteer, чтобы позволить магистрам права анализировать веб-контент на предмет соответствия WCAG и выявлять проблемы доступности.
ПРИМЕЧАНИЕ: Это не официальный сервер MCP от Deque Labs.
Поставьте звездочку, если вам понравился проект! 🌟
Функции
Тестовые веб-страницы : проверка любого общедоступного URL-адреса на наличие проблем с доступностью.
Тестовые фрагменты HTML : проверка необработанных строк HTML на наличие проблем с доступностью
Тестирование на соответствие WCAG : проверка контента на соответствие различным стандартам WCAG (2.0, 2.1, 2.2)
Настраиваемые тесты : укажите, какие теги/стандарты доступности следует тестировать.
Исследование правил : получение информации о доступных правилах доступности.
Анализ цветового контраста : проверка цветовых сочетаний на соответствие WCAG
Проверка ARIA : проверка правильности использования атрибутов ARIA.
Обнаружение блокировки ориентации : определение контента, который заставляет менять конкретную ориентацию экрана.
Related MCP server: Web Accessibility MCP Server
Установка
Чтобы использовать этот сервер с Claude Desktop, вам необходимо настроить его в настройках MCP:
Для macOS: отредактируйте файл '~/Library/Application Support/Claude/claude_desktop_config.json'
{
"mcpServers": {
"a11y-accessibility": {
"command": "npx",
"args": [
"-y",
"a11y-mcp-server"
]
}
}
}Для Windows: отредактируйте файл %APPDATA%\Claude\settings\claude_mcp_settings.json
Для Linux: отредактируйте файл ~/.config/Claude/settings/claude_mcp_settings.json Замените /path/to/axe-mcp-server/build/index.js фактическим путем к скомпилированному файлу сервера.
Доступные инструменты
тест_доступности
Проверяет URL-адрес на наличие проблем с доступностью.
Параметры:
url(обязательно): URL-адрес веб-страницы для тестирования.tags(необязательно): Массив тегов WCAG для проверки (например, ["wcag2aa"])
Пример
{
"url": "https://example.com",
"tags": ["wcag2aa"]
}тестовая_html_строка
Проверяет HTML-строку на наличие проблем с доступностью. Параметры:
html (обязательно): HTML-контент для тестирования.
теги (необязательно): Массив тегов WCAG для проверки (например, ["wcag2aa"])
Пример
{
"html": "<div><img src='image.jpg'></div>",
"tags": ["wcag2aa"]
}получить_правила
Получите информацию о доступных правилах доступности с дополнительной фильтрацией.
проверка_контраста_цвета
Проверьте, соответствует ли сочетание цветов переднего плана и фона требованиям контрастности WCAG.
Параметры:
foreground(обязательно): цвет переднего плана в шестнадцатеричном формате (например, "#000000")background(обязательно): цвет фона в шестнадцатеричном формате (например, "#FFFFFF")fontSize(необязательно): размер шрифта в пикселях (по умолчанию: 16)isBold(необязательно): Выделен ли текст жирным шрифтом (по умолчанию: false)
Пример
{
"foreground": "#777777",
"background": "#EEEEEE",
"fontSize": 16,
"isBold": false
}проверка_контраста_цвета
Проверьте правильность использования атрибутов ARIA в HTML.
Параметры:
html(обязательно): HTML-контент для проверки использования атрибута ARIA
Пример
{
"html": "<div role='button' aria-pressed='false'>Click me</div>"
}проверка_ориентации_блокировки
Проверьте, не навязывает ли контент определенную ориентацию.
Параметры:
html(обязательно): HTML-контент для проверки проблем с ориентацией
Пример
{
"html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>"
}Формат ответа
Сервер возвращает результаты теста доступности в структурированном формате JSON:
{
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
"affectedNodes": [
{
"html": "<div style=\"color: #aaa; background-color: #eee;\">Low contrast text</div>",
"target": ["div"],
"failureSummary": "Fix any of the following: Element has insufficient color contrast of 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal)"
}
]
}
],
"passes": 1,
"incomplete": 0,
"inapplicable": 2,
"timestamp": "2025-04-25T16:45:33.655Z",
"url": "about:blank",
"testEngine": {
"name": "axe-core",
"version": "4.10.3"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36",
"windowWidth": 800,
"windowHeight": 600,
"orientationAngle": 0,
"orientationType": "portrait-primary"
}
}Зависимости
@modelcontextprotocol/sdk
кукловод
@axe-core/кукловод
топор-сердцевина