a11y-mcp-server

Servidor MCP para auditoría de accesibilidad, búsqueda de criterios WCAG y guía de remediación. Ya obsoleto.

Características

• a11y_lookup_wcag: Buscar criterios WCAG 2.2 por número, palabra clave o nivel

• a11y_check_pattern: Analizar fragmentos HTML en busca de problemas comunes de accesibilidad

• a11y_suggest_fix: Obtener patrones de remediación con ejemplos de código antes/después

• a11y_document_component: Generar documentación de accesibilidad para más de 18 tipos de componentes de interfaz de usuario

• a11y_audit_summary: Generar informes de auditoría profesionales a partir de una lista de problemas

Related MCP server: @accesslint/mcp

Desarrollo local

# Install dependencies
npm install

# Build
npm run build

# Run locally
npm start

# Server runs on http://localhost:8080
# Health check: http://localhost:8080/health
# MCP endpoint: http://localhost:8080/mcp

Despliegue en NFSN

Requisitos previos para mi propia ruta; tu experiencia puede variar:

1. Cuenta en NFSN con fondos (depósito inicial de ~$10)

2. Acceso SSH configurado

Pasos de configuración

1. Crear sitio en NFSN

1. Iniciar sesión en la interfaz de miembros de NFSN

2. Sites → Create a New Site

3. Tipo de sitio: Custom (requerido para el demonio de Node.js)

4. Anota el nombre de host de tu sitio (ej. yoursite.nfshost.com)

2. Subir código

# From project directory
rsync -avz --exclude node_modules --exclude .git --exclude dist \
  ./ USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net:/home/protected/a11y-mcp-server

3. Configuración SSH

ssh USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net

# Navigate to project
cd /home/protected/a11y-mcp-server

# Check Node.js version (should be 18+)
node --version

# Install dependencies
npm install --production

# Build
npm run build

# Make run.sh executable
chmod +x run.sh

# Test locally
./run.sh
# Ctrl+C to stop

4. Configurar demonio NFSN

1. Ir al panel de control del sitio NFSN

2. Sites → Your Site → Site Information → Daemons

3. Agregar demonio:

   • Tag: node

   • Command Line: /home/protected/a11y-mcp-server/run.sh

   • Working Directory: /home/protected/a11y-mcp-server

5. Configurar proxy NFSN

1. Sites → Your Site → Site Information → Proxies

2. Agregar proxy:

   • Protocol: http

   • Base URI: /mcp

   • Document Root: (dejar vacío)

   • Target Port: 8080

6. Verificar despliegue

# Check health endpoint
curl https://yoursite.nfshost.com/health

# Test MCP endpoint
curl -X POST https://yoursite.nfshost.com/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","method":"tools/list","id":1}'

Solución de problemas

Revisar registros del demonio:

ssh USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net
cat /home/protected/a11y-mcp-server/daemon.log

Reiniciar demonio: Mediante el panel de control de NFSN: Sites → Daemons → Restart

Comprobar si el demonio se está ejecutando:

ps aux | grep node

Configuración de Claude Code

Agregar a ~/.config/claude/claude_desktop_config.json:

{
  "mcpServers": {
    "a11y": {
      "url": "https://yoursite.nfshost.com/mcp"
    }
  }
}

Luego reinicia Claude Code.

Pruebas locales con Claude Code

Para realizar pruebas antes del despliegue en NFSN, ejecuta el servidor localmente y configura Claude Code para conectarse:

1. Iniciar el servidor:

npm start

2. Agregar a ~/.config/claude/claude_desktop_config.json:

{
  "mcpServers": {
    "a11y-local": {
      "url": "http://localhost:8080/mcp"
    }
  }
}

3. Reiniciar Claude Code

Preguntas de evaluación

Usa estas preguntas para verificar que el servidor funciona correctamente:

1. Búsqueda WCAG: "¿Qué criterio WCAG cubre la navegación por teclado y qué nivel es?"

   • Esperado: Devuelve 2.1.1 Teclado (Nivel A) con detalles completos

2. Patrón de remediación: "¿Cuál es el patrón de remediación para la falta de texto alternativo en imágenes decorativas?"

   • Esperado: Devuelve el patrón con un ejemplo de alt="" vacío

3. Documentación de componentes: "Generar documentación de accesibilidad para un componente de cuadro de diálogo modal."

   • Esperado: Devuelve interacciones de teclado, atributos ARIA, expectativas del lector de pantalla

4. Búsqueda WCAG 2.2: "¿Qué criterios WCAG 2.2 son específicos para interacciones móviles/táctiles?"

   • Esperado: Devuelve los criterios 2.5.x Modalidades de entrada

5. Fallos comunes: "¿Cuáles son los fallos comunes para el criterio 1.4.3 Contraste?"

   • Esperado: Devuelve técnicas de fallo F24, F83

Ejemplos de uso

Buscar criterio WCAG

Query: "What WCAG criterion covers keyboard navigation?"
Tool: a11y_lookup_wcag
Args: { "query": "keyboard" }

Comprobar HTML en busca de problemas

Query: "Check this HTML for accessibility issues"
Tool: a11y_check_pattern
Args: { "html": "<img src='logo.png'><button><svg>...</svg></button>" }

Obtener patrón de remediación

Query: "How do I fix missing alt text on decorative images?"
Tool: a11y_suggest_fix
Args: { "issueType": "missing-alt-decorative" }

Generar documentación de componentes

Query: "Generate accessibility documentation for a modal dialog"
Tool: a11y_document_component
Args: { "componentType": "modal" }

Actualización de datos WCAG

Los criterios WCAG se incluyen en src/data/wcag-criteria.json. Para actualizar:

1. Edita el archivo JSON con los nuevos criterios

2. Recompila: npm run build

3. Vuelve a desplegar en NFSN

Licencia

MIT