• CÓDIGO
  • NAV
  • VISUAL
  • HUMANO

Cómo auditar la accesibilidad de componentes con tu IA

Conecta tu IA a tu código para realizar comprobaciones automáticas según los estándares de accesibilidad. Detecta errores de marcado y contraste sin tener que revisar cada componente manualmente.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo puedo auditar la accesibilidad de componentes con mi IA?

Tu IA utiliza la herramienta validate_accessibility para escanear tu código en busca de errores de HTML semántico, bloqueos de teclado y fallos de contraste de color. Recibirás una lista clara de las infracciones específicas para corregir. Este desglose te muestra cómo ejecutar esas comprobaciones.

Donde aterrizan los problemas.

Resultados de la auditoría

La IA categoriza cada hallazgo para que sepas qué corregir primero.

CÓDIGO

Errores de marcado detectados

La IA identifica etiquetas ARIA faltantes o estructuras semánticas rotas. Obtendrás las líneas exactas de código que no cumplen la normativa.

NAV

Problemas de flujo de teclado

Detecta componentes que no se pueden alcanzar con la tecla Tab o que presentan bloqueos de foco. Esto ayuda a mantener una navegación lógica.

VISUAL

Fallos de contraste

La herramienta detecta texto con un contraste insuficiente sobre su fondo. Recibirás los códigos hex específicos que fallan las normas WCAG.

HUMANO

Requiere revisión manual

Algunos problemas de accesibilidad basados en la lógica requieren pruebas humanas. La IA señala estos casos para tu validación final.

El flujo

Lo que hace tu IA al recibir el código.

La IA se encarga del trabajo pesado de escaneo y comparación de patrones.

  1. Escanear marcado

    La IA inspecciona la estructura HTML para asegurar que elementos como botones e inputs usen las etiquetas correctas.

    validate_accessibility
  2. Comprobar navegación

    Simula la interacción con el teclado para encontrar elementos inalcanzables o que pierden el foco inesperadamente.

    validate_accessibility
  3. Analizar contraste

    El agente calcula la relación de luminancia entre los colores del texto y del fondo.

    validate_accessibility
  4. Reportar regresiones

    Compara los resultados actuales con ejecuciones anteriores para resaltar nuevos errores de accesibilidad.

    validate_accessibility

Pruébalo

Copia estos prompts para empezar.

Usa estos comandos para iniciar una auditoría de inmediato.

Puntos de partida

Sustituye las rutas de archivos o nombres de repositorios por las ubicaciones reales de tu proyecto.

WCAG 2.2 Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — WCAG 2.2 capabilities are ready to use.
Configuración · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "accessibility-prover-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp"
    }
  }
}
Copia en el chat04
  • Realiza una auditoría de accesibilidad en los componentes de ./src/components/ui.

  • Comprueba el contraste de color de los botones en mi archivo principal del dashboard.

  • Audita la navegación por teclado del componente modal en este repo.

  • Busca errores de HTML semántico en el código de la barra de navegación.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Empieza aquí

Conecta Accessibility Prover una vez y empieza a preguntar.

Solo necesitas vincular el MCP una vez. Tus credenciales permanecen cifradas y podrás empezar a auditar directamente desde tu cliente de IA preferido.

Conectar Accessibility Prover a tu IA

FAQ

Funcionamiento de la tarea

  • 01

    ¿Puede la IA corregir el código por mí?

    No. La IA identifica los errores y te indica dónde están, pero tú debes aplicar las correcciones manualmente en tu código.

  • 02

    ¿Comprueba la compatibilidad con lectores de pantalla?

    Sí, al verificar los atributos ARIA adecuados y las etiquetas HTML semánticas que utilizan los lectores de pantalla.

  • 03

    ¿Puede la IA borrar mis archivos?

    No. Este MCP solo tiene permisos para leer y validar tu código. No puede modificar ni eliminar ningún archivo.

  • 04

    ¿Detectará absolutamente todos los problemas de accesibilidad?

    No. Aunque detecta muchos fallos técnicos comunes, no puede sustituir una auditoría manual realizada por un humano con tecnología de asistencia.

  • 05

    ¿Cómo sabe si mis colores son incorrectos?

    Utiliza la herramienta validate_accessibility para calcular las relaciones de contraste de tu CSS y de los estilos en línea.

  • ¿Tienes más dudas sobre Accessibility Prover? La página del conector las responde. Ver todo lo que puede hacer el conector Accessibility Prover

Conecta WCAG 2.2 a Claude, Cursor, ChatGPT y más