# 🔍 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

```bash
# Clonar o navegar al proyecto
cd mcp-accessibility-audit

# Instalar dependencias
npm install
```

## 📖 Uso

### Con MCP Inspector (Recomendado para pruebas)

```bash
npm run mcp:inspector
```

Esto abrirá una interfaz web donde puedes:
1. Conectar al servidor
2. Listar herramientas disponibles
3. Ejecutar auditorías

### Con Claude Desktop

Agrega esta configuración a tu `claude_desktop_config.json`:

```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:

```bash
# 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](./docs/GUIA_USO.md) - Instrucciones detalladas paso a paso

## 📄 Licencia

MIT