Skip to main content
Glama
deenesjakoruzh
ronantakizawa

A11y MCP Server

by ronantakizawa
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Hybrid

Сервер MCP для тестирования веб-доступности (A11y MCP)

значок кузнеца

a11ymcpwide

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/кукловод

  • топор-сердцевина

Install Server
A
license - permissive license
A
quality
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
17dResponse time
–Release cycle
–Releases (12mo)
Issues opened vs closed

Resources

Tools

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ronantakizawa/a11ymcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server