Web Accessibility MCP Server

Um servidor MCP que fornece capacidades de análise de acessibilidade

GitHub
4
Experimente este MCPPatrocinado

Documentação

MseeP.ai Security Assessment Badge

Web Accessibility MCP Server

smithery badge

Um servidor MCP (Model Context Protocol) que fornece capacidades de análise de acessibilidade web usando axe-core e Puppeteer.

Web Accessibility Server MCP server

Recursos

  • Analisar a acessibilidade web de qualquer URL usando axe-core
  • Simular daltonismo (protanopia, deuteranopia, tritanopia) usando matrizes de cores
  • Relatórios detalhados de violações de acessibilidade
  • Suporte para user agents e seletores personalizados
  • Registro de depuração para solução de problemas
  • Verificações abrangentes de acessibilidade baseadas nas diretrizes WCAG

Pré-requisitos

  • Node.js (v14 ou superior)
  • npm

Instalação

Instalando via Smithery

Para instalar o Web Accessibility MCP Server para Claude Desktop automaticamente via Smithery:

npx -y @smithery/cli install @bilhasry-deriv/mcp-web-a11y --client claude

Instalação Manual

  1. Clone o repositório:
git clone [repository-url]
cd mcp-web-a11y
  1. Instale as dependências:
npm install
  1. Compile o servidor:
npm run build

Configuração

Adicione o servidor ao seu arquivo de configurações MCP (normalmente localizado em ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json):

{
  "mcpServers": {
    "web-a11y": {
      "command": "node",
      "args": ["/path/to/mcp-web-a11y/build/index.js"],
      "disabled": false,
      "autoApprove": [],
      "env": {
        "MCP_OUTPUT_DIR": "/path/to/output/directory"
      }
    }
  }
}

Variáveis de Ambiente

  • MCP_OUTPUT_DIR: Diretório onde as saídas de captura de tela serão salvas
    • Necessário para a ferramenta simulate_colorblind
    • Se não for especificado, o padrão é './output' relativo ao diretório de trabalho atual
    • Deve ser um caminho absoluto quando configurado nas configurações do MCP

Uso

O servidor fornece duas ferramentas: check_accessibility para analisar acessibilidade web e simulate_colorblind para simular daltonismo.

Ferramenta: check_accessibility

Verifica a acessibilidade de uma URL fornecida usando axe-core.

Parâmetros

  • url (obrigatório): A URL a ser analisada
  • waitForSelector (opcional): Seletor CSS para aguardar antes da análise
  • userAgent (opcional): String de user agent personalizada para a solicitação

Exemplo de Uso

<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>check_accessibility</tool_name>
<arguments>
{
  "url": "https://example.com",
  "waitForSelector": ".main-content",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}
</arguments>
</use_mcp_tool>

Ferramenta: simulate_colorblind

Simula como uma página web aparece para usuários com diferentes tipos de daltonismo usando transformações de matriz de cores.

Tipos de Daltonismo

A ferramenta suporta três tipos de simulação de daltonismo:

  1. Protanopia (cegueira ao vermelho) - Usa a matriz:

    0.567, 0.433, 0
0.558, 0.442, 0
0, 0.242, 0.758

  2. Deuteranopia (cegueira ao verde) - Usa a matriz:

    0.625, 0.375, 0
0.7, 0.3, 0
0, 0.3, 0.7

  3. Tritanopia (cegueira ao azul) - Usa a matriz:

    0.95, 0.05, 0
0, 0.433, 0.567
0, 0.475, 0.525

Parâmetros

  • url (obrigatório): A URL a ser capturada
  • type (obrigatório): Tipo de daltonismo a simular ('protanopia', 'deuteranopia' ou 'tritanopia')
  • outputPath (opcional): Caminho personalizado para a saída da captura de tela
  • userAgent (opcional): String de user agent personalizada para a solicitação

Exemplo de Uso

<use_mcp_tool>
<server_name>mcp-web-a11y</server_name>
<tool_name>simulate_colorblind</tool_name>
<arguments>
{
  "url": "https://example.com",
  "type": "deuteranopia",
  "outputPath": "colorblind_simulation.png"
}
</arguments>
</use_mcp_tool>

Formato de Resposta

Resposta do check_accessibility

{
  "url": "analyzed-url",
  "timestamp": "ISO-timestamp",
  "violations": [
    {
      "impact": "serious|critical|moderate|minor",
      "description": "Description of the violation",
      "help": "Help text explaining the issue",
      "helpUrl": "URL to detailed documentation",
      "nodes": [
        {
          "html": "HTML of the affected element",
          "failureSummary": "Summary of what needs to be fixed"
        }
      ]
    }
  ],
  "passes": 42,
  "inapplicable": 45,
  "incomplete": 3
}

Resposta do simulate_colorblind

{
  "url": "analyzed-url",
  "type": "colorblind-type",
  "outputPath": "path/to/screenshot.png",
  "timestamp": "ISO-timestamp",
  "message": "Screenshot saved with [type] simulation"
}

Tratamento de Erros

O servidor inclui tratamento abrangente de erros para cenários comuns:

  • Erros de rede
  • URLs inválidas
  • Problemas de tempo limite
  • Problemas de resolução de DNS

As respostas de erro incluirão mensagens detalhadas para ajudar a diagnosticar o problema.

Desenvolvimento

Estrutura do Projeto

mcp-web-a11y/
├── src/
│   └── index.ts    # Main server implementation
├── build/          # Compiled JavaScript
├── output/         # Generated screenshots
├── package.json    # Project dependencies and scripts
└── tsconfig.json   # TypeScript configuration

Compilação

npm run build

Isso irá:

  1. Compilar TypeScript para JavaScript
  2. Tornar o arquivo de saída executável
  3. Colocar os arquivos compilados no diretório build

Depuração

O servidor inclui registro de depuração detalhado que pode ser observado na saída do console. Isso inclui:

  • Solicitações e respostas de rede
  • Status de carregamento da página
  • Status de espera do seletor
  • Quaisquer mensagens de console da página analisada
  • Progresso da simulação de cores

Problemas Comuns e Soluções

  1. Erros de Tempo Limite

    • Aumente o valor do tempo limite no código
    • Verifique a conectividade de rede
    • Verifique se a URL está acessível

  2. Erros de Resolução de DNS

    • Verifique se a URL está correta
    • Verifique a conectividade de rede
    • Tente usar o subdomínio www

  3. Seletor Não Encontrado

    • Verifique se o seletor existe na página
    • Aguarde o carregamento do conteúdo dinâmico
    • Verifique o código-fonte da página para o seletor correto

  4. Problemas de Simulação de Cores

    • Garanta que as cores da página estejam especificadas em um formato suportado (RGB, RGBA ou HEX)
    • Verifique se a página usa mudanças dinâmicas de cores (pode exigir tempo de espera adicional)
    • Verifique se o diretório de saída da captura de tela existe e é gravável

Contribuindo

  1. Faça um fork do repositório
  2. Crie um branch de funcionalidade
  3. Faça commit das suas alterações
  4. Envie para o branch
  5. Crie um Pull Request

Licença

Este projeto é licenciado sob a Licença MIT - consulte o arquivo LICENSE para obter detalhes.