Web Accessibility Testing (A11y MCP)

Servidor MCP de Pruebas de Accesibilidad Web (A11y MCP)

https://github.com/user-attachments/assets/316c6d44-e677-433e-b4d5-63630b4bab2b

A11y MCP es un servidor MCP (Model Context Protocol) que brinda a los LLMs acceso a APIs de pruebas de accesibilidad web.

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

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

Características

• Probar páginas web: Pruebe cualquier URL pública para detectar problemas de accesibilidad con dimensiones de viewport personalizables
• Probar fragmentos HTML: Pruebe cadenas HTML sin procesar para detectar problemas de accesibilidad
• Pruebas de cumplimiento WCAG: Verifique el contenido contra 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: Verifique combinaciones de colores para el cumplimiento de WCAG
• Validación de ARIA: Pruebe el uso correcto de los atributos ARIA
• Detección de bloqueo de orientación: Identifique contenido que fuerza orientaciones específicas de pantalla

Instalación

Requisitos previos

• Node.js 18 o posterior
• Un cliente compatible con MCP (Claude Desktop, Claude Code, VS Code, Cursor, etc.)

Claude Desktop

Edite su archivo de configuración de MCP:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

Agregue el servidor al objeto mcpServers:

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

Claude Code (CLI)

claude mcp add a11y-accessibility -- npx -y a11y-mcp-server

Esto registra el servidor para el proyecto actual. Para que esté disponible en todos los proyectos:

claude mcp add --scope user a11y-accessibility -- npx -y a11y-mcp-server

Verifique que el servidor esté registrado:

claude mcp list

Nota: Las herramientas MCP están disponibles después de reiniciar su sesión de Claude Code.

VS Code (Copilot)

Agregue a su settings.json o .vscode/settings.json de VS Code:

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

Cursor

Agregue a su configuración de MCP de Cursor (.cursor/mcp.json):

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

Windsurf

Agregue a su configuración de MCP de Windsurf (~/.codeium/windsurf/mcp_config.json):

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

Herramientas disponibles

test_accessibility

Prueba una URL para detectar problemas de accesibilidad.

Parámetros:

Parámetro	Requerido	Descripción
url	Sí	La URL de la página web a probar
tags	No	Matriz de etiquetas WCAG para probar (por ejemplo, ["wcag2aa"])
width	No	Ancho del viewport en píxeles (predeterminado: 1280)
height	No	Alto del viewport en píxeles (predeterminado: 800)

Ejemplo — viewport de escritorio (predeterminado):

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

Ejemplo — viewport móvil (iPhone 12/13):

{
  "url": "https://example.com",
  "tags": ["wcag2aa"],
  "width": 390,
  "height": 844
}

test_html_string

Prueba una cadena HTML para detectar problemas de accesibilidad.

Parámetros:

Parámetro	Requerido	Descripción
html	Sí	El contenido HTML a probar
tags	No	Matriz de etiquetas WCAG para probar (por ejemplo, ["wcag2aa"])
width	No	Ancho del viewport en píxeles (predeterminado: 1280)
height	No	Alto del viewport en píxeles (predeterminado: 800)

Ejemplo — viewport predeterminado:

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

Ejemplo — viewport móvil:

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

get_rules

Obtenga información sobre las reglas de accesibilidad disponibles con filtrado opcional. Devuelve una matriz de objetos de reglas, cada uno con ruleId, description, help, helpUrl y tags.

Parámetros:

Parámetro	Requerido	Descripción
tags	No	Filtrar reglas por etiquetas (por ejemplo, ["wcag2a", "wcag2aa", "best-practice"])

Ejemplo — filtrar reglas por WCAG 2.1 AA:

{
  "tags": ["wcag21aa"]
}

Ejemplo — obtener todas las reglas (sin filtro):

{}

check_color_contrast

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

Parámetros:

Parámetro	Requerido	Descripción
foreground	Sí	Color de primer plano (por ejemplo, "#000000", "rgb(0,0,0)")
background	Sí	Color de fondo (por ejemplo, "#FFFFFF", "rgb(255,255,255)")
fontSize	No	Tamaño de fuente en píxeles (predeterminado: 16)
isBold	No	Si el texto está en negrita (predeterminado: false)

Ejemplo:

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

check_aria_attributes

Verifica si los atributos ARIA se usan correctamente en HTML.

Parámetros:

Parámetro	Requerido	Descripción
html	Sí	Contenido HTML para probar el uso de atributos ARIA

Ejemplo:

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

check_orientation_lock

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

Parámetros:

Parámetro	Requerido	Descripción
html	Sí	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 resultados de pruebas de accesibilidad en 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"
  }
}

Referencia de etiquetas WCAG

Etiquetas comunes que puede usar con el parámetro tags:

Etiqueta	Descripción
wcag2a	WCAG 2.0 Nivel A
wcag2aa	WCAG 2.0 Nivel AA
wcag2aaa	WCAG 2.0 Nivel AAA
wcag21a	WCAG 2.1 Nivel A
wcag21aa	WCAG 2.1 Nivel AA
wcag22aa	WCAG 2.2 Nivel AA
best-practice	Mejores prácticas (no estrictamente WCAG)

Dependencias

• @modelcontextprotocol/sdk
• puppeteer
• @axe-core/puppeteer
• axe-core

Licencia

MIT