Servidor MCP de accesibilidad web

Un servidor MCP (Protocolo de contexto de modelo) que proporciona capacidades de análisis de accesibilidad web utilizando axe-core y Puppeteer.

Características

Analice la accesibilidad web de cualquier URL utilizando axe-core
Simular el daltonismo (protanopia, deuteranopia, tritanopia) utilizando matrices de color
Informes detallados de violaciones de accesibilidad
Compatibilidad con agentes de usuario y selectores personalizados
Registro de depuración para la resolución de problemas
Comprobaciones de accesibilidad exhaustivas basadas en las pautas WCAG

Prerrequisitos

Node.js (v14 o superior)
npm

Instalación

Instalación mediante herrería

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

Clonar el repositorio:

git clone [repository-url]
cd mcp-web-a11y

Instalar dependencias:

npm install

Construir el servidor:

npm run build

Configuración

Agregue el servidor a su 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 captura de pantalla
- Necesario 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 el 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 que se debe 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: simular_daltónico

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

Tipos de daltonismo

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

Protanopia (ciego al rojo) - Utiliza matriz:
0.567, 0.433, 0 0.558, 0.442, 0 0, 0.242, 0.758
Deuteranopia (ciego a la luz verde) - Utiliza la matriz:
0.625, 0.375, 0 0.7, 0.3, 0 0, 0.3, 0.7
Tritanopia (ciego azul) - Utiliza 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 simular_daltónico

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

Edificio

npm run build

Esto hará lo siguiente:

Compilar TypeScript a JavaScript
Hacer que el archivo de salida sea ejecutable
Coloque los archivos compilados en el directorio build

Depuración

El servidor incluye un registro de depuración detallado que se puede consultar 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

Errores de tiempo de espera
- Aumente el valor de tiempo de espera en el código
- Comprobar la conectividad de la red
- Verificar que la URL sea accesible
Errores de resolución de DNS
- Verifique que la URL sea correcta
- Comprobar la conectividad de la red
- Intente utilizar el subdominio www
Selector no encontrado
- Verificar que el selector exista en la página
- Espere a que se cargue el contenido dinámico
- Verifique la fuente de la página para encontrar el selector correcto
Problemas de simulación de color
- Asegúrese de que los colores de la página estén especificados en un formato compatible (RGB, RGBA o HEX)
- Verifique si la página utiliza cambios de color dinámicos (puede requerir tiempo de espera adicional)
- Verifique que el directorio de salida de la captura de pantalla exista y se pueda escribir

Contribuyendo

Bifurcar el repositorio
Crear una rama de características
Confirme sus cambios
Empujar hacia la rama
Crear una solicitud de extracción

Licencia

Este proyecto está licenciado bajo la licencia MIT: consulte el archivo de LICENCIA para obtener más detalles.

Web Accessibility MCP Server

Integrations

Servidor MCP de accesibilidad web

Características

Prerrequisitos

Instalación

Instalación mediante herrería

Instalación manual

Configuración

Variables de entorno

Uso

Herramienta: check_accessibility

Parámetros

Ejemplo de uso

Herramienta: simular_daltónico

Tipos de daltonismo

Parámetros

Ejemplo de uso

Formato de respuesta

Respuesta de check_accessibility

Respuesta de simular_daltónico

Manejo de errores

Desarrollo

Estructura del proyecto

Edificio

Depuración

Problemas comunes y soluciones

Contribuyendo

Licencia

Tools

Related Resources

Appeared in Searches