Skip to main content
Glama
Sign In
deenesjakoruzh

Web Accessibility MCP Server

by bilhasry-deriv
GitHub
JavaScript
MIT License
1
  • Apple
  • Linux
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

  1. Clonar el repositorio:
git clone [repository-url] cd mcp-web-a11y
  1. Instalar dependencias:
npm install
  1. 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:

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

  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.

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

Proporciona análisis de accesibilidad web y simulación de daltonismo utilizando axe-core y Puppeteer, lo que permite realizar verificaciones de accesibilidad detalladas y simulaciones visuales basadas en las pautas WCAG.

  1. Características
    1. Prerrequisitos
      1. Instalación
        1. Instalación mediante herrería
        2. Instalación manual
      2. Configuración
        1. Variables de entorno
      3. Uso
        1. Herramienta: check\_accessibility
        2. Herramienta: simular\_daltónico
        3. Formato de respuesta
        4. Manejo de errores
      4. Desarrollo
        1. Estructura del proyecto
        2. Edificio
        3. Depuración
      5. Problemas comunes y soluciones
        1. Contribuyendo
          1. Licencia

            Related Resources

            Related MCP Servers

            • MCP Accessibility Scanner

              JustasMonkev
              A
              security
              A
              license
              A
              quality
              Enables automated web accessibility scans for WCAG compliance using Playwright and Axe-core, providing visual and JSON reports with remediation guidance.
              Last updated -
              1
              43
              7
              TypeScript
              MIT License

            • Cursor A11y MCP

              westsideori
              A
              security
              A
              license
              A
              quality
              Provides accessibility testing capabilities through CLI, helping identify accessibility issues in web applications using axe-core and Puppeteer.
              Last updated -
              1
              JavaScript
              MIT License

            • Playwright MCP Serverofficial

              microsoft
              A
              security
              A
              license
              A
              quality
              A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
              Last updated -
              21
              74,440
              11,777
              TypeScript
              Apache 2.0
              • Linux
              • Apple

            • a11y-mcp

              priyankark
              -
              security
              -
              license
              -
              quality
              An MCP (Model Context Protocol) server for performing accessibility audits on webpages using axe-core. Use the results in an agentic loop with your favorite AI assistants (Cline/Cursor/GH Copilot) and let them fix a11y issues for you!
              Last updated -
              JavaScript
              Mozilla Public License 2.0

            View all related MCP servers

            Appeared in Searches

            New MCP Servers

            MCP directory API

            We provide all the information about MCP servers via our MCP API.

            curl -X GET 'https://glama.ai/api/mcp/v1/servers/bilhasry-deriv/mcp-web-a11y'

            If you have feedback or need assistance with the MCP directory API, please join our Discord server