Web Accessibility Testing (A11y MCP)

Teste páginas web e HTML para problemas de acessibilidade e conformidade com WCAG usando Axe-core e Puppeteer.

GitHub
91
Experimente este MCPPatrocinado

Documentação

Servidor MCP de Testes de Acessibilidade Web (A11y MCP)

Web Accessibility Testing MCP - Give LLMs access to web accessibility testing APIs | Product Hunt

MseeP.ai Security Assessment Badge

Verified on MseeP

https://github.com/user-attachments/assets/316c6d44-e677-433e-b4d5-63630b4bab2b

A11y MCP é um servidor MCP (Model Context Protocol) que fornece a LLMs acesso a APIs de testes de acessibilidade web.

Este servidor utiliza a API Deque Axe-core e o Puppeteer para permitir que LLMs analisem conteúdo web quanto à conformidade com WCAG e identifiquem problemas de acessibilidade.

Nota: Este não é um servidor MCP oficial da Deque Labs.

Recursos

  • Testar páginas web: Teste qualquer URL pública quanto a problemas de acessibilidade com dimensões de viewport personalizáveis
  • Testar trechos de HTML: Teste strings HTML brutas quanto a problemas de acessibilidade
  • Teste de conformidade WCAG: Verifique conteúdo em relação a vários padrões WCAG (2.0, 2.1, 2.2)
  • Testes personalizáveis: Especifique quais tags/padrões de acessibilidade testar
  • Exploração de regras: Obtenha informações sobre regras de acessibilidade disponíveis
  • Análise de contraste de cores: Verifique combinações de cores quanto à conformidade com WCAG
  • Validação de ARIA: Teste o uso adequado de atributos ARIA
  • Detecção de bloqueio de orientação: Identifique conteúdo que força orientações específicas de tela

Instalação

Pré-requisitos

  • Node.js 18 ou superior
  • Um cliente compatível com MCP (Claude Desktop, Claude Code, VS Code, Cursor, etc.)

Claude Desktop

Edite seu arquivo de configuração MCP:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json

Adicione o servidor ao objeto mcpServers:

{
  "mcpServers": {
    "a11y-accessibility": {
      "command": "npx",
      "args": ["-y", "a11y-mcp-server"]
    }
  }
}

Claude Code (CLI)

claude mcp add a11y-accessibility -- npx -y a11y-mcp-server

Isso registra o servidor para o projeto atual. Para disponibilizá-lo em todos os projetos:

claude mcp add --scope user a11y-accessibility -- npx -y a11y-mcp-server

Verifique se o servidor está registrado:

claude mcp list

Nota: As ferramentas MCP ficam disponíveis após reiniciar sua sessão do Claude Code.

VS Code (Copilot)

Adicione ao seu settings.json ou .vscode/settings.json do VS Code:

{
  "mcp": {
    "servers": {
      "a11y-accessibility": {
        "command": "npx",
        "args": ["-y", "a11y-mcp-server"]
      }
    }
  }
}

Cursor

Adicione à sua configuração MCP do Cursor (.cursor/mcp.json):

{
  "mcpServers": {
    "a11y-accessibility": {
      "command": "npx",
      "args": ["-y", "a11y-mcp-server"]
    }
  }
}

Windsurf

Adicione à sua configuração MCP do Windsurf (~/.codeium/windsurf/mcp_config.json):

{
  "mcpServers": {
    "a11y-accessibility": {
      "command": "npx",
      "args": ["-y", "a11y-mcp-server"]
    }
  }
}

Ferramentas Disponíveis

test_accessibility

Testa uma URL quanto a problemas de acessibilidade.

Parâmetros:

ParâmetroObrigatórioDescrição
urlSimA URL da página web a ser testada
tagsNãoMatriz de tags WCAG para testar (ex.: ["wcag2aa"])
widthNãoLargura do viewport em pixels (padrão: 1280)
heightNãoAltura do viewport em pixels (padrão: 800)

Exemplo — viewport desktop (padrão):

{
  "url": "https://example.com",
  "tags": ["wcag2aa"]
}

Exemplo — viewport mobile (iPhone 12/13):

{
  "url": "https://example.com",
  "tags": ["wcag2aa"],
  "width": 390,
  "height": 844
}

test_html_string

Testa uma string HTML quanto a problemas de acessibilidade.

Parâmetros:

ParâmetroObrigatórioDescrição
htmlSimO conteúdo HTML a ser testado
tagsNãoMatriz de tags WCAG para testar (ex.: ["wcag2aa"])
widthNãoLargura do viewport em pixels (padrão: 1280)
heightNãoAltura do viewport em pixels (padrão: 800)

Exemplo — viewport padrão:

{
  "html": "<div><img src='image.jpg'></div>",
  "tags": ["wcag2aa"]
}

Exemplo — viewport mobile:

{
  "html": "<div><img src='image.jpg'></div>",
  "tags": ["wcag2aa"],
  "width": 375,
  "height": 812
}

get_rules

Obtenha informações sobre regras de acessibilidade disponíveis com filtragem opcional. Retorna uma matriz de objetos de regra, cada um contendo ruleId, description, help, helpUrl e tags.

Parâmetros:

ParâmetroObrigatórioDescrição
tagsNãoFiltrar regras por tags (ex.: ["wcag2a", "wcag2aa", "best-practice"])

Exemplo — filtrar regras por WCAG 2.1 AA:

{
  "tags": ["wcag21aa"]
}

Exemplo — obter todas as regras (sem filtro):

{}

check_color_contrast

Verifica se uma combinação de cores de primeiro plano e fundo atende aos requisitos de contraste WCAG.

Parâmetros:

ParâmetroObrigatórioDescrição
foregroundSimCor de primeiro plano (ex.: "#000000", "rgb(0,0,0)")
backgroundSimCor de fundo (ex.: "#FFFFFF", "rgb(255,255,255)")
fontSizeNãoTamanho da fonte em pixels (padrão: 16)
isBoldNãoSe o texto está em negrito (padrão: false)

Exemplo:

{
  "foreground": "#777777",
  "background": "#EEEEEE",
  "fontSize": 16,
  "isBold": false
}

check_aria_attributes

Verifica se os atributos ARIA são usados corretamente em HTML.

Parâmetros:

ParâmetroObrigatórioDescrição
htmlSimConteúdo HTML para testar o uso de atributos ARIA

Exemplo:

{
  "html": "<div role='button' aria-pressed='false'>Click me</div>"
}

check_orientation_lock

Verifica se o conteúdo força uma orientação específica.

Parâmetros:

ParâmetroObrigatórioDescrição
htmlSimConteúdo HTML para testar problemas de bloqueio de orientação

Exemplo:

{
  "html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>"
}

Formato de Resposta

O servidor retorna resultados de testes de acessibilidade em JSON estruturado:

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast",
      "affectedNodes": [
        {
          "html": "<div style=\"color: #aaa; background-color: #eee;\">Low contrast text</div>",
          "target": ["div"],
          "failureSummary": "Fix any of the following: Element has insufficient color contrast of 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal)"
        }
      ]
    }
  ],
  "passes": 1,
  "incomplete": 0,
  "inapplicable": 2,
  "timestamp": "2025-04-25T16:45:33.655Z",
  "url": "about:blank",
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.3"
  }
}

Referência de Tags WCAG

Tags comuns que você pode usar com o parâmetro tags:

TagDescrição
wcag2aWCAG 2.0 Nível A
wcag2aaWCAG 2.0 Nível AA
wcag2aaaWCAG 2.0 Nível AAA
wcag21aWCAG 2.1 Nível A
wcag21aaWCAG 2.1 Nível AA
wcag22aaWCAG 2.2 Nível AA
best-practiceMelhores práticas (não estritamente WCAG)

Dependências

Licença

MIT