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

Esto 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 alt o 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