Web Accessibility MCP Server

Un servidor MCP que proporciona capacidades de análisis de accesibilidad web utilizando axe-core y Puppeteer.

GitHub
4
Prueba este MCPPatrocinado

Documentación

MseeP.ai Security Assessment Badge

Servidor MCP de Accesibilidad Web

smithery badge

Un servidor MCP (Model Context Protocol) que proporciona capacidades de análisis de accesibilidad web utilizando axe-core y Puppeteer.

Web Accessibility Server MCP server

Características

  • Analiza la accesibilidad web de cualquier URL utilizando axe-core
  • Simula daltonismo (protanopia, deuteranopia, tritanopia) mediante matrices de color
  • Informes detallados de violaciones de accesibilidad
  • Soporte para agentes de usuario personalizados y selectores
  • Registro de depuración para resolución de problemas
  • Comprobaciones integrales de accesibilidad basadas en las pautas WCAG

Requisitos previos

  • Node.js (v14 o superior)
  • npm

Instalación

Instalación mediante Smithery

Para instalar Web Accessibility MCP Server para Claude Desktop automáticamente a través de Smithery:

npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude

Instalación manual

  1. Clona el repositorio:
git clone [repository-url]
cd mcp-web-a11y
  1. Instala las dependencias:
npm install
  1. Compila el servidor:
npm run build

Configuración

Añade el servidor a tu archivo de configuración de MCP (normalmente ubicado en ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json):

{
  "mcpServers": {
    "web-a11y": {
      "command": "node",
      "args": ["/path/to/mcp-web-a11y/build/index.js"],
      "disabled": false,
      "autoApprove": [],
      "env": {
        "MCP_OUTPUT_DIR": "/path/to/output/directory"
      }
    }
  }
}

Variables de entorno

  • MCP_OUTPUT_DIR: Directorio donde se guardarán las salidas de capturas de pantalla
    • Requerido para la herramienta simulate_colorblind
    • Si no se especifica, el valor predeterminado es './output' relativo al directorio de trabajo actual
    • Debe ser una ruta absoluta cuando se configura en la configuración de MCP

Uso

El servidor proporciona dos herramientas: check_accessibility para analizar la accesibilidad web y simulate_colorblind para simular daltonismo.

Herramienta: check_accessibility

Comprueba la accesibilidad de una URL determinada utilizando axe-core.

Parámetros

  • url (obligatorio): La URL a analizar
  • waitForSelector (opcional): Selector CSS para esperar antes del análisis
  • userAgent (opcional): Cadena de agente de usuario personalizada para la solicitud

Ejemplo de uso

<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>check_accessibility</tool_name>
<arguments>
{
  "url": "https://example.com",
  "waitForSelector": ".main-content",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}
</arguments>
</use_mcp_tool>

Herramienta: simulate_colorblind

Simula cómo aparece una página web a usuarios con diferentes tipos de daltonismo mediante transformaciones de matrices de color.

Tipos de daltonismo

La herramienta admite tres tipos de simulación de daltonismo:

  1. Protanopia (ceguera al rojo) - Utiliza la matriz:

    0.567, 0.433, 0
0.558, 0.442, 0
0, 0.242, 0.758

  2. Deuteranopia (ceguera al verde) - Utiliza la matriz:

    0.625, 0.375, 0
0.7, 0.3, 0
0, 0.3, 0.7

  3. Tritanopia (ceguera al azul) - Utiliza la matriz:

    0.95, 0.05, 0
0, 0.433, 0.567
0, 0.475, 0.525

Parámetros

  • url (obligatorio): La URL a capturar
  • type (obligatorio): Tipo de daltonismo a simular ('protanopia', 'deuteranopia' o 'tritanopia')
  • outputPath (opcional): Ruta personalizada para la salida de la captura de pantalla
  • userAgent (opcional): Cadena de agente de usuario personalizada para la solicitud

Ejemplo de uso

<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>simulate_colorblind</tool_name>
<arguments>
{
  "url": "https://example.com",
  "type": "deuteranopia",
  "outputPath": "colorblind_simulation.png"
}
</arguments>
</use_mcp_tool>

Formato de respuesta

Respuesta de check_accessibility

{
  "url": "analyzed-url",
  "timestamp": "ISO-timestamp",
  "violations": [
    {
      "impact": "serious|critical|moderate|minor",
      "description": "Description of the violation",
      "help": "Help text explaining the issue",
      "helpUrl": "URL to detailed documentation",
      "nodes": [
        {
          "html": "HTML of the affected element",
          "failureSummary": "Summary of what needs to be fixed"
        }
      ]
    }
  ],
  "passes": 42,
  "inapplicable": 45,
  "incomplete": 3
}

Respuesta de simulate_colorblind

{
  "url": "analyzed-url",
  "type": "colorblind-type",
  "outputPath": "path/to/screenshot.png",
  "timestamp": "ISO-timestamp",
  "message": "Screenshot saved with [type] simulation"
}

Manejo de errores

El servidor incluye un manejo integral de errores para escenarios comunes:

  • Errores de red
  • URLs no válidas
  • Problemas de tiempo de espera
  • Problemas de resolución de DNS

Las respuestas de error incluirán mensajes detallados para ayudar a diagnosticar el problema.

Desarrollo

Estructura del proyecto

mcp-web-a11y/
├── src/
│   └── index.ts    # Main server implementation
├── build/          # Compiled JavaScript
├── output/         # Generated screenshots
├── package.json    # Project dependencies and scripts
└── tsconfig.json   # TypeScript configuration

Compilación

npm run build

Esto:

  1. Compilará TypeScript a JavaScript
  2. Hará ejecutable el archivo de salida
  3. Colocará los archivos compilados en el directorio build

Depuración

El servidor incluye un registro de depuración detallado que se puede observar en la salida de la consola. Esto incluye:

  • Solicitudes y respuestas de red
  • Estado de carga de la página
  • Estado de espera del selector
  • Cualquier mensaje de consola de la página analizada
  • Progreso de la simulación de color

Problemas comunes y soluciones

  1. Errores de tiempo de espera

    • Aumenta el valor de tiempo de espera en el código
    • Comprueba la conectividad de red
    • Verifica que la URL sea accesible

  2. Errores de resolución de DNS

    • Verifica que la URL sea correcta
    • Comprueba la conectividad de red
    • Intenta usar el subdominio www

  3. Selector no encontrado

    • Verifica que el selector exista en la página
    • Espera a que el contenido dinámico se cargue
    • Comprueba el código fuente de la página para el selector correcto

  4. Problemas de simulación de color

    • Asegúrate de que los colores de la página estén especificados en un formato compatible (RGB, RGBA o HEX)
    • Comprueba si la página utiliza cambios de color dinámicos (puede requerir tiempo de espera adicional)
    • Verifica que el directorio de salida de capturas de pantalla exista y sea escribible

Contribuciones

  1. Haz un fork del repositorio
  2. Crea una rama de funcionalidad
  3. Realiza tus cambios
  4. Haz push a la rama
  5. Crea una Pull Request

Licencia

Este proyecto está licenciado bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.