🔍 MCP Accessibility Audit
Servidor MCP (Model Context Protocol) para ejecutar auditorías de accesibilidad web siguiendo los estándares WCAG. Genera reportes detallados en español con soluciones recomendadas.
✨ Características
- 🔎 Auditoría automatizada usando axe-core y Puppeteer
- 🇪🇸 Reportes en español con traducciones de violaciones
- 💡 Soluciones recomendadas con ejemplos de código
- 📊 Reportes en Markdown fáciles de leer y versionar
- 🎯 Soporte WCAG 2.0 y 2.1 (niveles A, AA, AAA)
📋 Requisitos
- Node.js 18.0.0 o superior
- npm 9.0.0 o superior
🚀 Instalación
# Clonar o navegar al proyecto
cd mcp-accessibility-audit
# Instalar dependencias
npm install📖 Uso
Con MCP Inspector (Recomendado para pruebas)
npm run mcp:inspectorEsto abrirá una interfaz web donde puedes:
- Conectar al servidor
- Listar herramientas disponibles
- Ejecutar auditorías
Con Claude Desktop
Agrega esta configuración a tu claude_desktop_config.json:
{
"mcpServers": {
"accessibility-audit": {
"command": "npx",
"args": ["tsx", "src/index.ts"],
"cwd": "/ruta/a/mcp-accessibility-audit"
}
}
}🛠️ Herramientas Disponibles
audit_accessibility
Ejecuta una auditoría de accesibilidad en una URL.
| Parámetro | Tipo | Requerido | Descripción |
|---|---|---|---|
url | string | ✅ | URL a auditar |
outputDir | string | ❌ | Directorio para reportes (default: ./reports) |
wcagLevel | string | ❌ | Nivel WCAG (default: wcag21aa) |
list_reports
Lista todos los reportes generados.
| Parámetro | Tipo | Requerido | Descripción |
|---|---|---|---|
outputDir | string | ❌ | Directorio donde buscar (default: ./reports) |
📁 Estructura del Proyecto
mcp-accessibility-audit/
├── src/
│ ├── index.ts # Punto de entrada
│ ├── server.ts # Configuración del servidor MCP
│ ├── tools/ # Definición de herramientas
│ ├── services/ # Lógica de negocio
│ ├── translations/ # Traducciones al español
│ ├── types/ # Tipos TypeScript
│ └── utils/ # Utilidades
├── docs/
│ ├── ARQUITECTURA.md # Documentación de arquitectura
│ └── GUIA_USO.md # Guía de uso detallada
├── reports/ # Reportes generados (gitignore)
└── package.json🌿 Ramas del Repositorio
| Rama | Contenido |
|---|---|
master | Código fuente del servidor MCP Accessibility Audit |
test-accessibility-app | Proyecto React de prueba con problemas de accesibilidad intencionales para validar el MCP |
Proyecto de Prueba
La rama test-accessibility-app contiene una aplicación React + TypeScript con violaciones de accesibilidad intencionales:
- 🖼️ Imágenes sin
alto con alt no descriptivo - 📝 Formularios sin labels asociados
- 🔘 Botones sin texto accesible
- 🔗 Enlaces con texto no descriptivo
- 🏗️ Estructura HTML incorrecta (saltos de encabezados, múltiples h1)
- 🎨 Problemas de contraste de color
- 📊 Tablas sin encabezados
Para usar el proyecto de prueba:
# Cambiar a la rama de prueba
git checkout test-accessibility-app
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm run dev
# Se abrirá en http://localhost:5180
# Luego ejecutar audit_accessibility con url: http://localhost:5180📚 Documentación
- Guía de Uso - Instrucciones detalladas paso a paso
📄 Licencia
MIT