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 :

Instalación manual

1. Clonar el repositorio:

2. Instalar dependencias:

3. Construir el servidor:

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 ):

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

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:

1. Protanopia (ciego al rojo) - Utiliza matriz:

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

2. Deuteranopia (ciego a la luz verde) - Utiliza la matriz:

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

3. 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

Formato de respuesta

Respuesta de check_accessibility

Respuesta de simular_daltónico

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

Edificio

Esto hará lo siguiente:

1. Compilar TypeScript a JavaScript

2. Hacer que el archivo de salida sea ejecutable

3. 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

1. 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

2. Errores de resolución de DNS

   • Verifique que la URL sea correcta

   • Comprobar la conectividad de la red

   • Intente utilizar el subdominio www

3. 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

4. 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

1. Bifurcar el repositorio

2. Crear una rama de características

3. Confirme sus cambios

4. Empujar hacia la rama

5. 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.