axe MCP Server

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

Descripción general

El Servidor axe MCP es un servidor del Protocolo de Contexto de Modelo (MCP) que integra pruebas de accesibilidad de nivel empresarial directamente en su flujo de trabajo de desarrollo. Construido sobre la confiable plataforma axe, permite a los desarrolladores realizar escaneos de accesibilidad completos y recibir orientación experta en remediación sin salir de su IDE.

El servidor ofrece tres capacidades: analyze, remediate y igt. analyze también ejecuta Pruebas Guiadas Inteligentes Automatizadas contra la página que escanea, lo que supera a la ahora obsoleta herramienta independiente igt.

Estas herramientas se integran sin problemas con clientes compatibles con MCP (como Claude Desktop, VS Code con Copilot o Cursor) y respetan la configuración de axe de su organización.

Obteniendo acceso

El servidor Axe MCP está incluido en el paquete paquete Axe DevTools para Web. Una suscripción que habilita el acceso al servidor axe MCP se configura hablando con un representante de ventas de Deque.

Herramientas y capacidades

La Herramienta analyze

La herramienta analyze realiza un análisis completo de accesibilidad en páginas web al ejecutar un escaneo a través de la extensión del navegador axe DevTools en un entorno de navegador real. Funciona perfectamente tanto con las URL locales de desarrollo (por ejemplo, localhost:3000) como con las URL de producción remota.

Qué Hace

  1. Autenticación - Valida las credenciales del usuario (ya sea una clave API o un token de acceso OAuth 2.0) para garantizar el acceso autorizado
  2. Recuperación de configuración - Obtiene la configuración específica de la organización del usuario configuración de axe, que incluye:
    • Estándar de pruebas de accesibilidad (por ejemplo, WCAG 2.2 AA)
    • versión de axe-core
    • Necesita revisión / mejores prácticas
    • preajuste Reglas Avanzadas
  3. Análisis basado en navegador - Inicia una instancia del navegador en segundo plano con la extensión axe DevTools montada
  4. Navegación de la página - Navega a la URL proporcionada por el usuario en su aviso al agente de IA
  5. Escaneo de accesibilidad - Realiza un análisis completo de accesibilidad en la página renderizada usando la extensión del navegador axe DevTools, asegurando que se pruebe la experiencia real del usuario (no solo HTML estático)
  6. Entrega de resultados - Devuelve los resultados del análisis de manera detallada al agente en un formato estructurado

Pruebas de respuesta

La herramienta analyze admite parámetros opcionales viewportWidth y viewportHeight, lo que permite probar páginas en dimensiones específicas de la ventana de visualización. Esto es útil para detectar problemas de accesibilidad que solo aparecen en ciertos tamaños de pantalla, como puntos de quiebre para móviles o tabletas.

Analyze http://localhost:3000 for accessibility issues at a mobile viewport of 375x812

Cuando se omiten ambos parámetros, el escaneo se ejecuta a 1000×1080. Pasar viewportWidth solo predetermina la altura a 1080; viewportHeight requiere que se establezca viewportWidth. Cualquiera de las dimensiones puede ser de hasta 7680 píxeles.

Escaneos Parciales de Página

Por defecto, la herramienta analyze escanea toda la página. Para delimitar el escaneo a una región específica, pase el parámetro opcional selector, útil para centrarse en un solo componente o excluir partes ruidosas y no relacionadas de la página de los resultados.

  • Una única cadena de selector CSS apunta a un elemento en el marco superior:

    {
      "url": "http://localhost:3000",
      "selector": "#main"
    }
  • Una matriz de selectores CSS avanza a través de los límites del iframe o Shadow-DOM: cada segmento selecciona el anfitrión para el siguiente. Use un arreglo solo cuando el objetivo esté dentro de un iframe o raíz Shadow:

    {
      "url": "http://localhost:3000",
      "selector": ["iframe#checkout", "#payment-form"]
    }

Un arreglo admite hasta 10 segmentos. Si el selector no coincide con ningún elemento en la página, el escaneo devuelve un error. Cuando selector se omite, se escanea toda la página.

Solicite a su agente de IA en lenguaje natural — el agente traduce su intención en la llamada a la herramienta:

Scan only the #main region of http://localhost:3000 for accessibility issues

Interacciones del navegador antes del escaneo

La herramienta analyze admite un arreglo opcional before de pasos de interacción que se ejecutan después de que la página se carga pero antes del escaneo de accesibilidad. Esto desbloquea varios escenarios de prueba en el mundo real:

  • Páginas protegidas por inicio de sesión — complete las credenciales y envíe antes de escanear la página posterior al inicio de sesión
  • Banners de cookies/consentimiento — descartar banners que de otro modo superpondrían o ocultarían el contenido de la página
  • Contenido dinámico — espere a que aparezca contenido renderizado por el cliente (cambios de ruta, DOM inyectado tardíamente) antes de escanear

Los pasos se ejecutan en orden del arreglo, en el mismo contexto del navegador que el escaneo, por lo que las cookies, localStorage, y cualquier cambio de ruta desencadenado por click o fill persisten en el escaneo.

El arreglo before admite hasta 20 pasos. Cada paso tiene su propio tiempo de espera de BROWSER_TIMEOUT_MS (por defecto 30000 ms); no hay anulación por paso.

Acciones Soportadas
Acción Campos requeridos Campos opcionales Propósito
click selector Haga clic en el elemento que coincida con el CSS selector (por ejemplo, un botón de enviar, un botón "Descartar" en un banner).
fill selector, value Llene un input que coincida con selector con value. Úselo para credenciales, consultas de búsqueda o campos de formulario. Una cadena vacía borra la entrada.
waitFor selector state — uno de "visible" (por defecto), "attached", "hidden", "detached" Espere a que el elemento que coincide con selector alcance state. Úselo para controlar el paso siguiente o el propio escaneo. Elija un selector que exista únicamente en el estado posterior a la interacción (por ejemplo, un botón de cierre de sesión o el encabezado del tablero) — los selectores genéricos como body o #app ya existen antes de la interacción y se resuelven instantáneamente, por lo que no controlarán nada.
Ejemplo: Iniciar sesión antes de escanear

Solicite a su agente de IA en lenguaje natural — el agente traduce su intención en la llamada a la herramienta:

Analyze http://localhost:3000 for accessibility issues. Before running
the analysis, fill in the #username and #password fields with USERNAME
and PASSWORD from ./.env.local, click the button[type=submit] button,
and wait for #main-content to appear.

El agente resuelve el aviso y llama a la herramienta analyze con un payload similar a:

{
  "url": "http://localhost:3000",
  "before": [
    {
      "action": "fill",
      "selector": "#username",
      "value": "<resolved-from-.env.local>"
    },
    {
      "action": "fill",
      "selector": "#password",
      "value": "<resolved-from-.env.local>"
    },
    { "action": "click", "selector": "button[type=submit]" },
    { "action": "waitFor", "selector": "#main-content" }
  ]
}
important

fill.value es tratado como sensible. El servidor axe MCP nunca registra fill.value, nunca lo replica en mensajes de error, y nunca lo envía a la telemetría. Use fill para cualquier entrada proporcionada por el usuario o secreta (contraseñas, tokens de API, etc.) para que los secretos permanezcan ocultos en todo el pipeline — y nunca inserte valores sensibles en un selector, que aparecen aparecen en registros y mensajes de error.

note

El agente resuelve value, no el servidor. El servidor axe MCP trata value como una cadena literal — no no lee archivos, expande variables de entorno, ni interpreta la sintaxis de marcadores como ${VAR}, $VAR o {{VAR}}. Su agente de IA (Claude, Copilot, Cursor, etc.) es responsable de resolver la intención del usuario en una cadena concreta antes de llamar a la herramienta.

En la práctica, esto significa:

  • Formula sugerencias naturalmente — "use USERNAME/PASSWORD from .env.local" funciona. El agente lee el archivo con sus propias herramientas de sistema de archivos y sustituye los valores.
  • No pegues sintaxis de marcador de posición — escribir value: "${USERNAME}" en una solicitud hará que la cadena literal ${USERNAME} sea escrita en el input.
  • Sé explícito sobre fuentes ambiguas — si dice "use my saved credentials" sin señalar al agente un archivo o variable de entorno, un agente bien comportado preguntará en lugar de adivinar. Dígale dónde buscar.
caution

Algunos flujos de autenticación no están soportados. before acciones impulsan la página a través de interacciones al estilo de Playwright en una instancia de Chromium en Docker. Lo siguiente está intencionadamente fuera de alcance:

  • Desafíos de Captcha desafíos (reCAPTCHA, hCaptcha, etc.)
  • Verificación de 2FA / TOTP / SMS códigos de verificación
  • Cadenas de redirección de SSO de terceros cadenas de redirección (por ejemplo, "Iniciar sesión con Google", páginas de inicio de sesión alojadas en Okta)

Cuando tu flujo de inicio de sesión real requiere cualquiera de los anteriores, escanea un punto de entrada alternativo:

  • Un cookie de sesión preautenticada inyectado con Inyección de cookies — autentíquese una vez en un navegador real, luego pase la cookie de sesión resultante para que el escaneo comience ya con sesión iniciada
  • Un token de sesión o URL de derivación que su equipo usa para pruebas automatizadas
  • Un URL de prueba con autenticación deshabilitada para pruebas de accesibilidad

Inyección de cookies

La herramienta analyze admite un arreglo opcional cookies que establece cookies en el contexto del navegador antes de la navegación — para que acompañen la primera solicitud a la página. Esto es distinto de before acciones, que se ejecutan después la navegación y por lo tanto no pueden influir en cómo se enruta la solicitud inicial. Dos usos comunes:

  • Enrutamiento de entornos — establece una cookie de selector de rama de características o de preparación que una capa de CDN o de borde lee para decidir qué versión del sitio servir.
  • Sesiones preautenticadas — inyecte una cookie de sesión válida para que el escaneo comience ya autenticado, sin tener que pasar por un formulario de inicio de sesión a través de before.

La matriz de cookies admite hasta 20 cookies.

Campo Requerido Descripción
name Nombre de la cookie. Aparece en registros y mensajes de error — nunca ponga valores secretos aquí.
value Valor de la cookie. Tratado como sensible: nunca se registra, se muestra en errores, ni se envía a telemetría. Hasta 10,000 caracteres (lo suficientemente largo para JWTs y tokens de sesión).
domain Dominio de la cookie. Requerido para que el alcance sea explícito. Use un punto al inicio (.example.com) para compartir la cookie entre subdominios.
path No Ruta de la cookie. Por defecto a /.
sameSite No Uno de "Strict", "Lax", o "None". "None" requiere secure: true.
secure No Booleano.
httpOnly No Booleano.
expires No Vencimiento como un timestamp Unix en segundos. Omita para una cookie de sesión.
Ejemplo: Accediendo a una página pre-autenticada

Solicite a su agente de IA en lenguaje natural — el agente traduce su intención en la llamada a la herramienta:

Analyze https://app.example.com for accessibility issues. Set the session
cookie for app.example.com from ./.env.local so the scan starts already
logged in.

El agente resuelve el valor de la cookie y llama a la herramienta analyze con un payload similar a:

{
  "url": "https://app.example.com",
  "cookies": [
    {
      "name": "session",
      "value": "<resolved-from-.env.local>",
      "domain": "app.example.com"
    }
  ]
}
important

cookies[*].value es tratado como sensible. Al igual que fill.value, el servidor axe MCP nunca registra el value de una cookie, nunca lo muestra en mensajes de error, y nunca lo envía a telemetría. Sin embargo, el name de una cookie aparecen aparece en registros y mensajes de error — manten los secretos en value, nunca en name.

note

El agente resuelve value, no el servidor. Los valores de las cookies siguen la misma regla que fill.value en before acciones: el servidor trata value como una cadena literal y no no leer archivos, expandir variables de entorno, o interpretar la sintaxis de marcadores de posición como ${VAR}. Su agente de IA resuelve la intención del usuario en una cadena concreta antes de llamar a la herramienta.

Capturas de Pantalla

La herramienta analyze puede devolver una captura de pantalla de la página junto con el informe de violación, para que pueda ver qué se escaneó. Pase el parámetro opcional screenshot para optar por incluirlo: un objeto vacío es suficiente:

{
  "url": "http://localhost:3000",
  "screenshot": {}
}

PNG es el valor predeterminado. Establezca format en "jpeg" para obtener una imagen más pequeña en páginas con muchas fotos:

{
  "url": "http://localhost:3000",
  "screenshot": { "format": "jpeg" }
}

La imagen regresa como un bloque de contenido de imagen MCP estándar, después del informe de violación.

Qué muestra la captura de pantalla
  • El área de visualización visible, no la página completa. El contenido debajo del pliegue no se incluye. Para capturar más de la página, pase un viewportHeight alto (por ejemplo, 4096) para que el área visible cubra lo que desea ver.
  • La página tal como estaba inmediatamente antes de que comenzara el escaneo. La captura ocurre justo antes de axe.run(), por lo que los cambios en el DOM que ocurren durante el escaneo —re-renderizados de SPA, actualizaciones de useEffect, animaciones, solicitudes en curso— no se reflejan. En aplicaciones de página única, este desfase es común.
caution

No trate la captura de pantalla como la fuente de verdad de lo que vio axe. Debido al desfase mencionado anteriormente, un elemento visible en la imagen puede no ser lo que axe evaluó. Pida a su agente que no narre elementos visibles pero no marcados como si fueran resultados del escaneo: el informe de violaciones es autoritativo.

Costo y soporte al cliente
tip

Solicite capturas de pantalla de manera deliberada. Un bloque de contenido de imagen cuesta fichas de entrada de imagen en la próxima vuelta de su agente —aproximadamente un orden de magnitud más que el texto equivalente. Solicite una captura de pantalla cuando realmente quiera ver la página, en lugar de agregarla a cada escaneo.

Si la imagen se renderiza en línea depende de su cliente MCP. El servidor siempre devuelve un bloque de imagen válido según la especificación, pero algunos clientes colapsan los resultados de la herramienta u omiten las vistas previas de las imágenes — VS Code con Copilot la muestra, mientras que Cursor y Claude Desktop pueden no hacerlo. Una vista previa faltante es una limitación de visualización del cliente, no una captura fallida.

Guardar capturas de pantalla en disco

La captura de pantalla también se puede escribir en un archivo, lo que es la forma confiable de ver una captura en un cliente que no renderiza imágenes en línea. Establezca saveTo en una ruta absoluta:

{
  "url": "http://localhost:3000",
  "screenshot": { "saveTo": "/Users/me/Desktop/home.png" }
}

O configure save: true para permitir que el servidor elija el nombre del archivo:

{
  "url": "http://localhost:3000",
  "screenshot": { "save": true }
}
Campo Tipo Propósito
saveTo string Ruta absoluta para escribir la imagen. Si apunta a un directorio existente, se escribe un nombre de archivo generado dentro de él. Implica guardar, por lo que save no es necesario junto a él.
save boolean Escribir la imagen bajo un nombre de archivo generado en el directorio de capturas de pantalla del servidor (AXE_SCREENSHOT_DIR, por defecto el directorio temporal de su sistema operativo). Ignorado cuando saveTo está configurado.
inline boolean Si también debe adjuntar la imagen como un bloque en línea (por defecto true). Configure false para omitir la imagen en línea y devolver solo la ruta guardada.

La ruta absoluta que se escribió vuelve en el array messages de la respuesta, para que su agente pueda decirle dónde encontrar el archivo.

tip

Empareje un guardado con inline: false para evitar pagar por la imagen dos veces. si su cliente no puede renderizar la imagen en línea de todos modos, { "save": true, "inline": false } escribe el archivo y omite el bloque de contenido de imagen, ahorrando así las fichas de entrada de imagen que de otro modo costaría en la próxima vuelta de su agente.

inline: false solo surte efecto una vez que el guardado realmente tiene éxito. Si la escritura falla, la imagen aún se devuelve en línea para que la captura no se pierda.

important

Bajo la distribución de Docker, el archivo se escribe dentro del contenedor. Para alcanzarlo desde su anfitrión, monte un volumen sobre el directorio de destino y apunte saveTo (o AXE_SCREENSHOT_DIR) a la ruta del lado del contenedor. El servidor no detecta si existe un montaje; sin uno, el archivo se escribe y luego se descarta con el contenedor.

Guardar se aplica a solo escaneos exitosos. Si el escaneo falla después de que se capturó la captura de pantalla, la imagen se devuelve en línea junto con el error independientemente de inline y nunca se escribe en disco.

Cuando la captura falla

La captura de pantalla se realiza con el mejor esfuerzo y nunca falla un escaneo. Si la captura se agota, el escaneo aún devuelve sus resultados con una nota en el array messages de la respuesta:

Screenshot capture failed: <reason>

Si el propio escaneo falla después de que la captura de pantalla fue tomada, la imagen se devuelve junto con la respuesta de error de todos modos – el estado visual de la página en el momento en que algo salió mal es generalmente la evidencia de depuración más útil de la que dispone.

note

Las capturas de pantalla solicitadas no se envían a Deque. La imagen se captura localmente y se devuelve directamente a su agente. Esto es independiente de la captura de pantalla de página completa que Reglas Avanzadas carga para la evaluación del lado del servidor; consulte Qué se envía a Deque.

Reglas Avanzadas

Más allá del conjunto de reglas estándar de axe-core, la herramienta analyze puede ejecutar Reglas Avanzadas: pruebas automatizadas que utilizan capturas de pantalla, visión por computadora y modelos de lenguaje de gran tamaño para detectar problemas que axe-core no puede identificar por sí solo, como encabezados que solo parecen encabezados o imágenes informativas con texto alternativo poco útil.

El preajuste que se ejecuta está regido por el configuración de axe de su organización y, donde su administrador lo permita, puede anularse por servidor con AXE_ADVANCED_RULES o por escaneo con el argumento advancedRules:

{
  "url": "http://localhost:3000",
  "advancedRules": "thorough"
}

Cada respuesta informa el preajuste que realmente se ejecutó y de dónde provino:

{
  "advancedRules": {
    "value": "thorough",
    "source": "tool_arg"
  }
}

Las Reglas avanzadas vienen con tu suscripción a axe DevTools para Web, la misma que te da el servidor axe MCP. Añaden aproximadamente 15–20 segundos a un escaneo, consumen Créditos de IA, y son el único caso en el que analyze envía datos de página (una captura de pantalla completa de la página más la estructura de la página) a Deque para evaluación. Consulta Reglas avanzadas para ajustes preestablecidos, precedencia, mensajes de degradación y detalles de privacidad.

Pruebas Guiadas Inteligentes

La herramienta analyze también puede ejecutar el Pruebas Guiadas Inteligentes Automatizadas (IGTs) de Deque en la misma página en la misma llamada. Pasa el arreglo opcional igtTools nombrando qué IGTs ejecutar — el IGT de Teclado es actualmente el valor soportado:

{
  "url": "http://localhost:3000",
  "igtTools": ["keyboard"]
}

Solicite a su agente de IA en lenguaje natural — el agente traduce su intención en la llamada a la herramienta:

Scan http://localhost:3000 for accessibility issues and run the keyboard IGT on it

Cada IGT solicitado se ejecuta en secuencia después del escaneo axe, en la misma página, en el mismo navegador, con el mismo ancho de la ventana de visualización. Todo lo que prepara la página se ejecuta una vez y se aplica a ambos: before acciones, inyección de cookies, y el parámetros de la ventana de visualización.

{
  "url": "http://localhost:3000",
  "igtTools": ["keyboard"],
  "before": [
    {
      "action": "fill",
      "selector": "#username",
      "value": "<resolved-from-.env.local>"
    },
    { "action": "click", "selector": "button[type=submit]" },
    { "action": "waitFor", "selector": "#main-content" }
  ]
}
Formato de la respuesta

Configurar igtTools cambia el formato de data. Sin él, data es el arreglo de problemas de axe. Con él, data lleva axe y igt como claves equivalentes, con una entrada igt por herramienta solicitada:

{
  "pageUrl": "http://localhost:3000",
  "data": {
    "axe": [],
    "igt": {
      "keyboard": {
        "status": "complete",
        "issues": [],
        "igtElements": [],
        "terminatedReason": "keyboard-trap"
      }
    }
  }
}
  • status"complete" o "error". Verifícalo antes de leer cualquier otra cosa: issues y igtElements están presentes solo en "complete", y error solo en "error".
  • issues — los problemas de accesibilidad que encontró el IGT. El número de problemas es la longitud de este arreglo.
  • igtElements — elemento cada procesado por el IGT, no una lista de problemas. Las entradas con analysisFailed: true no pudieron ser analizadas por AI y deben revisarse manualmente. Cada entrada se reduce solo a campos identificativos: vnodeId, selector, tagName, role, accessibleName, states, y analysisFailed, cada uno presente solo cuando el elemento lo tiene.
  • terminatedReason — presente únicamente cuando la ejecución se detuvo antes de tiempo, lo que significa que los resultados son parciales. "keyboard-trap" significa que la prueba se encontró con un foco atrapado del que no pudo escapar; "insufficient-credits" significa que la cuenta se quedó sin créditos de AI a mitad de la ejecución.
note

Una llamada sin igtTools no se cambia. data sigue siendo el arreglo de problemas de axe exactamente como antes, de modo que las indicaciones existentes, las instrucciones del agente y las integraciones siguen funcionando sin modificaciones.

Los fallos están aislados

Un IGT que falla no hace que no falle la llamada y nunca afecta los resultados de axe. El fallo se informa como un status: "error" propio de esa herramienta con un mensaje, mientras que los resultados de axe se devuelven normalmente — incluyendo cuando la configuración de aprendizaje automático de tu organización está desactivada, en cuyo caso la parte IGT explica que se requiere aprendizaje automático.

Uso de créditos

Los IGTs están impulsados por AI y son parte del Sistema de Gestión de Créditos de IA. Cada ejecución consume créditos de AI del saldo mensual de tu organización; el escaneo de axe en sí no lo hace. Solicita IGTs deliberadamente en lugar de agregarlos a cada escaneo.

tip

Si tus instrucciones personalizadas del agente le indican al agente que llame a la herramienta igt independiente, actualízalas para usar analyze con igtTools en su lugar — una llamada cubre tanto el escaneo como el IGT, y la herramienta independiente es obsoleto.

Beneficios clave

  • Pruebas en navegador real - Prueba la página renderizada real, no solo el código fuente, asegurando resultados precisos
  • Estándares de la organización - Respeta la configuración de axe de su equipo para pruebas consistentes en todos los usuarios
  • Cobertura integral - Aprovecha la plataforma axe líder en la industria
  • Pruebas de respuesta - Pruebe con dimensiones específicas de la ventana gráfica para detectar problemas de accesibilidad específicos de los puntos de quiebre
  • Escaneos Dirigidos - Delimite un escaneo a una región específica, iframe o raíz de sombra con el parámetro selector
  • **Páginas Autenticadas e Interactivas** - Escanee páginas detrás de un inicio de sesión, descarte banners de cookies, o espere contenido dinámico usando before acciones
  • Cookies de Sesión y de Entorno - Ingrese ya autenticado o diríjase a un entorno específico, inyectando cookies antes de la navegación con el parámetro cookies
  • Contexto visual - Devuelve una captura de pantalla de la página junto con el informe con el parámetro screenshot, incluso cuando un escaneo falla
  • Reglas avanzadas - Detecta problemas que requieren razonamiento visual o contextual, a un umbral de confianza que controla tu organización
  • Pruebas Guiadas Inteligentes - Ejecuta un IGT en la misma página en la misma llamada con el parámetro igtTools

Salida

La herramienta devuelve una respuesta JSON estructurada que contiene:

  • Todas las violaciones de accesibilidad encontradas
  • Niveles de severidad de las violaciones (crítico, serio, moderado, menor)
  • Selectores de elementos específicos y código fuente
  • IDs de reglas y descripciones
  • Un bloque advancedRules que informa del preset Reglas avanzadas que se ejecutó y de dónde proviene
  • Un arreglo messages que lleva notas sobre la ejecución (por ejemplo, una captura de pantalla fallida, una ejecución degradada de reglas avanzadas, o la ruta donde se guardó una captura de pantalla)

Cuando se establece screenshot, un bloque de contenido de imagen sigue al informe. Cuando se establece igtTools, los resultados IGT se devuelven junto con los resultados de axe, clasificados por nombre de herramienta.

La Herramienta remediate

La herramienta remediate toma uno o más problemas de accesibilidad identificados por la herramienta analyze o igt y genera una guía de remediación impulsada por IA, consciente del contexto, que los agentes de codificación pueden traducir en correcciones de código reales. Los problemas se envían como un lote, por lo que una sola llamada puede devolver correcciones para cada violación encontrada en una página.

Qué Hace

  1. Autenticación - Valida las credenciales del usuario—ya sea una clave API o un token de acceso OAuth 2.0—para asegurar el acceso autorizado
  2. Uso de Crédito de IA - Cada problema en el lote consume créditos de IA de la asignación de su organización, permitiendo el uso de modelos de IA avanzados entrenados con la extensa experiencia en accesibilidad de Deque
  3. **Remediación Generada por IA** - Crea soluciones de accesibilidad de alta calidad y accionables que los agentes de codificación pueden interpretar e implementar en el código fuente
note

Si los créditos de IA se agotan, la herramienta remediate dejará de funcionar hasta que tus créditos se restauren (ya sea comprando más o reiniciando tu ciclo mensual). Sin embargo, la herramienta analyze continuará funcionando.

Remediación por Lotes

La herramienta acepta una matriz de issues. Envíe todos los problemas de una sola ejecución analyze o igt juntos en una llamada en lugar de llamar a la herramienta una vez por problema — un lote admite entre 1 y 25 problemas.

Cada problema tiene los siguientes campos:

Campo Requerido Descripción
id Un identificador elegido por el llamador, único dentro del lote (ej., el ID de regla más un contador: color-contrast-0). Se usa solo para correlacionar cada resultado con su entrada.
rule El ID de regla de axe de la salida de analyze/igt (ej., color-contrast, image-alt).
elementHtml El fragmento HTML del elemento que infringe.
remediation Una descripción de lo que está mal y lo que necesita corregirse, tomada del resumen del problema (enriquecida opcionalmente con su descripción, texto de ayuda o razonamiento de IA).
pageUrl No La URL de la página que se está remediando, desde la respuesta de analyze.

Indique a su agente de IA en lenguaje natural — que ensamblará el lote a partir de los resultados del análisis:

Analyze http://localhost:3000 and remediate every issue found

El agente resuelve el aviso y llama a la herramienta remediate con un payload similar a:

{
  "issues": [
    {
      "id": "color-contrast-0",
      "rule": "color-contrast",
      "elementHtml": "<span style=\"color: #aaa\">Sign up</span>",
      "remediation": "Increase the contrast ratio to at least 4.5:1",
      "pageUrl": "http://localhost:3000"
    },
    {
      "id": "image-alt-1",
      "rule": "image-alt",
      "elementHtml": "<img src=\"logo.png\">",
      "remediation": "Add alt text describing the image"
    }
  ]
}

Salida

La herramienta devuelve una matriz de resultados por problema, cada uno vinculado a su entrada por id. Un resultado tiene una de dos formas:

  • Éxitostatus: "ok", con un objeto remediation que contiene una descripción general, los pasos de remediación, y una corrección de código concreta
  • Errorstatus: "error", con un objeto error (code y message) para un problema que no pudo ser remediado
{
  "data": [
    {
      "id": "color-contrast-0",
      "status": "ok",
      "remediation": {
        "general_description": "...",
        "remediation": "...",
        "code_fix": "<span style=\"color: #595959\">Sign up</span>"
      }
    },
    {
      "id": "image-alt-1",
      "status": "error",
      "error": { "code": "LLM_ERROR", "message": "..." }
    }
  ]
}

Los resultados son independientes: un fallo en un problema no bloquea la orientación para los demás.

Uso de Créditos

La herramienta remediate es parte del Sistema de Gestión de Créditos de IA. Cada problema en un lote consume créditos de la asignación mensual de su organización. Los administradores pueden monitorear el uso de créditos a través del Portal de Cuentas de axe.

La Herramienta igt

caution

La herramienta igt está obsoleta. Usa en su lugar parámetro analyze de la herramienta igtTools — ejecuta las mismas Pruebas Guiadas Inteligentes en la misma página en una sola llamada, junto con el escaneo de axe.

igt sigue siendo completamente funcional y devuelve los mismos resultados que antes, por lo que nada se romperá hoy. Será eliminado en una futura versión. Si tus instrucciones personalizadas del agente nombran la herramienta igt, actualízalas para llamar a analyze con igtTools.

La herramienta igt ejecuta el Pruebas Guiadas Inteligentes Automatizadas de Deque en una página web como una llamada independiente. Todo lo que hace, analyze ahora lo hace en la misma llamada que el escaneo de accesibilidad — consulta Pruebas Guiadas Inteligentes para el uso y el consumo de créditos, que son los mismos para ambos.

El objeto de resultado por prueba es también el mismo para ambos — status, issues, igtElements, y un terminatedReason opcional, como se describe en Formato de la respuesta. Solo el envoltorio difiere: igt devuelve sus resultados directamente bajo data, clasificados por nombre de prueba (data.keyboard), mientras que analyze los anida bajo data.igt junto a data.axe.

Empezando

Configurar el Servidor MCP de axe implica tres elecciones independientes:

  1. Elige una distribución — Docker o npm
  2. Configura la autenticación — una clave API o OAuth 2.0
  3. Configura tu clienteVS Code con Copilot, Cursor, o Claude Code

Los usuarios de Claude Code pueden omitir estos pasos con el plugin de accesibilidad axe, que registra el servidor y agrega comandos de barra para la configuración, instrucciones del agente y la ejecución completa del ciclo de remediación.

Para variables de entorno e instrucciones recomendadas para el agente de IA, consulta Referencia de Configuración. Si algo sale mal, consulta Solución de Problemas.

Ejemplos de Indicaciones

Asegurando que se llamen las herramientas esperadas

En muchos entornos de desarrollo, usar la siguiente sintaxis (con el prefijo "#") garantizará que se llamen las herramientas del servidor axe MCP como se espera:

#analyze the http://localhost:3033/ web page for accessibility issues and #remediate any violations found

Analizar una URL de localhost para problemas de accesibilidad:

Analyze http://localhost:3000 for accessibility issues

Análisis con remediación:

Analyze https://example.com for accessibility issues and fix any issues found

Analizar una página detrás de un inicio de sesión:

Analyze http://localhost:3000 for accessibility issues. Before running the
analysis, fill in the #username and #password fields with USERNAME and
PASSWORD from ./.env.local, click the button[type=submit] button, and
wait for #main-content to appear.

Cerrar una banner de cookies antes de escanear:

Analyze https://example.com for accessibility issues, but first click the
#cookie-dismiss button to dismiss the cookie consent banner.

Captura una captura de pantalla de la página:

Analyze http://localhost:3000 for accessibility issues and capture a screenshot of the page
Analyze https://app.example.com for accessibility issues. Set the session
cookie for app.example.com from ./.env.local so the scan starts already
logged in.

Soporte

Para preguntas, problemas o comentarios relativos al axe MCP Server:

Preguntas frecuentes sobre Seguridad y Privacidad

¿El axe MCP Server captura o almacena nuestro código fuente?

No. El servidor MCP de axe no captura ni almacena tu código fuente en ninguna base de datos o almacenamiento persistente.

Cuando la herramienta analyze se ejecuta, la respuesta incluye el código fuente HTML de los elementos con problemas de accesibilidad para propósitos de contexto y depuración. Sin embargo, estos datos:

  • Solo se devuelven en la respuesta inmediata de la API a su agente de IA
  • Nunca se almacenan en bases de datos gestionadas por Deque
  • Permanecen dentro de su entorno de desarrollo local
  • Se descartan después de que se complete el análisis

¿Cuánto tiempo permanecen los resultados de las pruebas MCP en la infraestructura gestionada por Deque?

No lo hacen. Los resultados de las pruebas MCP no se preservan en ninguna base de datos o sistema de almacenamiento gestionado por Deque.

La herramienta analyze:

  • Funciona completamente en su máquina: en un contenedor Docker, o como un proceso local de Node.js con la distribución npm
  • Devuelve los resultados directamente a su agente de IA
  • No envía los resultados del análisis a los servidores de Deque

Hay dos excepciones:

  • La herramienta remediate, que puede incluir metadatos mínimos de violación (ver abajo) para generar orientación de solución impulsada por AI.
  • Reglas avanzadas, cuando hay un ajuste preestablecido activo. Las Reglas Avanzadas se evalúan en el servidor, por lo que analyze carga una captura de pantalla de página completa y la estructura de la página que necesitan las reglas. Ver Qué se envía a Deque.

¿Qué datos se envían a los servidores de Deque?

Solo al usar la herramienta remediate:

Los siguientes datos se envían al punto de acceso de remediación de IA de Deque para generar orientación de corrección:

  • ID de regla - La regla específica de accesibilidad que fue violada
  • HTML del elemento - El marcado HTML del(los) elemento(s) afectado(s)
  • Metadatos del problema - Descripción de la violación y orientación sobre la corrección de axe-core

Estos datos se utilizan exclusivamente para generar orientación de remediación y no se almacenan a largo plazo en las bases de datos de Deque.

Al usar Reglas avanzadas:

Las Reglas Avanzadas son evaluadas por los servicios de ML y LLM de Deque en lugar de en el navegador local, por lo que un escaneo con un preset activo envía:

  • Una captura de pantalla de página completa de la página que se está escaneando
  • Estructura de la página y estilos calculados — la carga de evaluación que necesitan las reglas avanzadas para razonar sobre el diseño, el contraste y los encabezados

Esta captura es independiente del parámetro opcional screenshot de la herramienta analyze: omitir ese parámetro no lo impide. Configure el preset de Reglas Avanzadas en disabled — por escaneo, por servidor o para toda la organización en configuración de axe — para páginas cuyo contenido no debe salir de su entorno.

De lo contrario, la herramienta analyze no envía ningún dato a los servidores de Deque más allá de las solicitudes de autenticación (validando su clave API o el token de acceso OAuth 2.0) y obteniendo la configuración de axe de su organización.

¿Qué nivel de acceso necesita el agente de IA para funcionar?

El agente de IA (Claude, Copilot, Cursor, etc.) necesita acceso a:

  1. Comunicación del servidor MCP - El agente debe poder llamar a las herramientas del servidor MCP a través del Protocolo de Contexto del Modelo

  2. Datos de respuesta de herramientas - El agente recibe:

    • Datos de violaciones de accesibilidad de llamadas analyze
    • Orientación sobre la corrección de llamadas remediate
    • Estos datos son necesarios para que el agente entienda los problemas y genere correcciones de código
  3. Su base de código (opcional) - Si deseas que el agente aplique automáticamente correcciones de código, necesita acceso a tus archivos de código fuente

  • Esto es estándar para los asistentes de codificación de IA en IDEs (VS Code, Cursor, etc.)
  • No se requiere si solo está utilizando las herramientas para análisis y orientación (por ejemplo, a través de la aplicación de escritorio Claude)

El propio servidor MCP necesita acceso a:

  • URLs que especifique para las pruebas (admite tanto locales como remotos)
  • Tus credenciales de axe: ya sea una clave API (generada en el Portal de Cuentas de axe) o un token de acceso OAuth 2.0 (obtenido a través de @deque/axe-auth); proporcionado mediante variable de entorno

Importante: El servidor MCP se ejecuta localmente en tu máquina — en un contenedor Docker, o como un proceso Node.js con la distribución npm. No requiere acceso amplio al sistema de archivos ni privilegios elevados.

Mejores prácticas

  • Seguridad de las Credenciales - Almacena tu AXE_API_KEY o AXE_ACCESS_TOKEN como variable de entorno, no en el código. Con OAuth 2.0, @deque/axe-auth mantiene los tokens en el llavero de tu sistema operativo e inyecta un token de acceso fresco al iniciar, por lo que no necesita residir ningún secreto de larga duración en tu configuración
  • Pruebas locales - Prueba URLs de desarrollo local (localhost) o en etapa en desarrollo para mantener el código sensible pre-producción aislado
  • Aislamiento de red - El servidor MCP solo se comunica con:
    • URLs que solicite explícitamente analizar
    • Servidores Deque para autenticación (validación de clave API o token OAuth 2.0) y remediación (cuando se solicita)
    • Su agente de IA local a través del protocolo MCP
  • Revise antes de aplicar - Siempre revisa los cambios de código generados por IA antes de comprometerlos en tu base de código