- CÓDIGO
- NAV
- VISUAL
- HUMANO
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.
Escanear marcado
La IA inspecciona la estructura HTML para asegurar que elementos como botones e inputs usen las etiquetas correctas.
validate_accessibilityComprobar navegación
Simula la interacción con el teclado para encontrar elementos inalcanzables o que pierden el foco inesperadamente.
validate_accessibilityAnalizar contraste
El agente calcula la relación de luminancia entre los colores del texto y del fondo.
validate_accessibilityReportar 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.
https://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcpClaude Desktop
Sigue los pasos siguientes para conectarte en segundos.
- 1In Claude Desktop, open Settings → Connectors.
- 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
- 3Click Add and start a new chat — WCAG 2.2 capabilities are ready to use.
{
"mcpServers": {
"accessibility-prover-mcp": {
"url": "https://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp"
}
}
}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 IAFAQ
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
