Servidor MCP A11y

A11y MCP es un servidor MCP (Protocolo de contexto de modelo) que brinda a los LLM acceso a las API de pruebas de accesibilidad web.

Este servidor utiliza la API Deque Axe-core y Puppeteer para permitir que los LLM analicen el contenido web para verificar el cumplimiento de WCAG e identificar problemas de accesibilidad.

NOTA: Este no es un servidor MCP oficial de Deque Labs.

¡Deja una estrella si te gustó el proyecto! 🌟

Características

Prueba de páginas web : prueba cualquier URL pública para detectar problemas de accesibilidad
Probar fragmentos HTML : probar cadenas HTML sin procesar para detectar problemas de accesibilidad
Pruebas de cumplimiento de WCAG : comprobar el contenido según varios estándares WCAG (2.0, 2.1, 2.2)
Pruebas personalizables : especifique qué etiquetas/estándares de accesibilidad probar
Exploración de reglas : obtenga información sobre las reglas de accesibilidad disponibles
Análisis de contraste de color : comprobar combinaciones de colores para cumplimiento de WCAG
Validación de ARIA : prueba el uso correcto de los atributos ARIA
Detección de bloqueo de orientación : identifica el contenido que fuerza orientaciones de pantalla específicas

Instalación

Para utilizar este servidor con Claude Desktop, debe configurarlo en la configuración de MCP:

Para macOS: edite el archivo en '~/Library/Application Support/Claude/claude_desktop_config.json'

{
  "mcpServers": {
    "a11y-accessibility": {
    "command": "npx",
    "args": [
      "-y",
      "a11y-mcp-server"
    ]
   }
  }
}

Para Windows: edite el archivo en %APPDATA%\Claude\settings\claude_mcp_settings.json

Para Linux: edite el archivo en ~/.config/Claude/settings/claude_mcp_settings.json Reemplace /path/to/axe-mcp-server/build/index.js con la ruta real a su archivo de servidor compilado.

Herramientas disponibles

prueba_accesibilidad

Prueba una URL para detectar problemas de accesibilidad.

Parámetros:

url (obligatorio): La URL de la página web a probar
tags (opcional): Matriz de etiquetas WCAG para realizar pruebas (por ejemplo, ["wcag2aa"])

Ejemplo

{
 "url": "https://example.com",
 "tags": ["wcag2aa"]
}

cadena_html_de_prueba

Comprueba si una cadena HTML presenta problemas de accesibilidad. Parámetros:

html (obligatorio): El contenido HTML a probar
etiquetas (opcional): Matriz de etiquetas WCAG para realizar pruebas (por ejemplo, ["wcag2aa"])

Ejemplo

{
  "html": "<div><img src='image.jpg'></div>",
  "tags": ["wcag2aa"]
}

obtener_reglas

Obtenga información sobre las reglas de accesibilidad disponibles con filtrado opcional.

comprobar_contraste_de_color

Compruebe si una combinación de colores de primer plano y de fondo cumple con los requisitos de contraste WCAG.

Parámetros:

foreground (obligatorio): color de primer plano en formato hexadecimal (por ejemplo, "#000000")
background (obligatorio): color de fondo en formato hexadecimal (por ejemplo, "#FFFFFF")
fontSize (opcional): tamaño de fuente en píxeles (predeterminado: 16)
isBold (opcional): si el texto está en negrita (predeterminado: falso)

Ejemplo

{
  "foreground": "#777777",
  "background": "#EEEEEE",
  "fontSize": 16,
  "isBold": false
}

comprobar_contraste_de_color

Compruebe si los atributos ARIA se utilizan correctamente en HTML.

Parámetros:

html (obligatorio): contenido HTML para probar el uso de atributos ARIA

Ejemplo

{
  "html": "<div role='button' aria-pressed='false'>Click me</div>"
}

comprobar_bloqueo_de_orientación

Comprueba si el contenido fuerza una orientación específica.

Parámetros:

html (obligatorio): contenido HTML para probar problemas de bloqueo de orientación

Ejemplo

{
  "html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>"
}

Formato de respuesta

El servidor devuelve los resultados de la prueba de accesibilidad en un formato JSON estructurado:

{
  "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"
  }
}

Dependencias

@modelcontextprotocol/sdk
titiritero
@axe-core/titiritero
núcleo de hacha

A11y MCP Server

Integrations

Características

Instalación

Herramientas disponibles

prueba_accesibilidad

cadena_html_de_prueba

obtener_reglas

comprobar_contraste_de_color

comprobar_contraste_de_color

comprobar_bloqueo_de_orientación

Formato de respuesta

Dependencias

Related MCP Servers

MCP Accessibility Scanner

Web Accessibility MCP Server

Cursor A11y MCP

Playwright MCP Serverofficial

Integrations

Servidor MCP de pruebas de accesibilidad web (A11y MCP)

Características

Instalación

Herramientas disponibles

prueba_accesibilidad

cadena_html_de_prueba

obtener_reglas

comprobar_contraste_de_color

comprobar_contraste_de_color

comprobar_bloqueo_de_orientación

Formato de respuesta

Dependencias

Related MCP Servers

MCP Accessibility Scanner

Web Accessibility MCP Server

Cursor A11y MCP

Playwright MCP Serverofficial