Escalando Acessibilidade com Varreduras do Lado do Navegador

Distribuir agentes para ler cada arquivo de componente é uma forma tentadora de revisão de acessibilidade. Funciona bem em um pequeno projeto. Em uma base de código real com centenas de componentes, múltiplas rotas e vários ramos ativos, é um problema de orçamento. Você está pagando taxas de LLM por um trabalho que um mecanismo de auditoria determinístico faz em JavaScript.

A assimetria é o ponto. Verificações de regras contra um DOM renderizado são JavaScript determinístico, não tokens de LLM. A alavancagem do agente está no julgamento: escolher o texto alternativo correto, o rótulo certo, aplicar a edição no lugar certo no código-fonte. Gaste tokens em revisões, não em descobertas.

Esta manhã, executei esse loop contra um aplicativo React implantado. Uma auditoria do lado do navegador retornou 29 tipos de violações do DOM ao vivo. O agente abriu apenas os dois arquivos de origem aos quais essas violações apontavam, aplicou correções, e esse foi o trabalho. Sem varredura de arquivos, sem escaneamento da base de código.

A forma de custo

Uma varredura de agente ingênua percorre cada arquivo de componente: lê, raciocina, relata. O custo cresce com o tamanho do repositório. Execute isso em cada PR, além de uma varredura noturna em ramos de longa duração, e você está pagando por tudo que existe, a cada ciclo.

Uma auditoria do navegador é limitada ao que está realmente renderizado. Uma injeção é executada contra a página, retorna uma lista estruturada de violações, e o agente só abre os arquivos implicados pelo que foi retornado. O custo escala com o que está quebrado, não com o que existe.

Essa é a diferença entre "adoraríamos rodar isso à noite" e "estamos rodando isso à noite."

Como é o loop com MCP

A versão MCP é concreta. Com @accesslint/mcp emparelhado com um MCP de navegador (chrome-devtools-mcp recomendado), o agente faz aproximadamente o seguinte:

1. Chama audit_browser_script e recebe de volta um pequeno snippet de JS.
2. Pede ao MCP do navegador para evaluate_script esse snippet na URL carregada.
3. O snippet inicializa @accesslint/core de um CDN, executa a auditoria, retorna JSON.
4. Chama audit_browser_collect e recebe de volta [{ ruleId, selector, html, impact, message, ... }, ...].
5. Para cada violação, busca no código-fonte por ganchos estáveis no snippet (data-testid, aria-label, texto visível, nomes de classes) para localizar o arquivo.
6. Aplica a correção na localização do código-fonte.

Os passos 1 a 4 são JavaScript determinístico. Os passos 5 e 6 são onde os tokens do agente são gastos, e eles escalam com o número de violações, não com o tamanho da base de código.

Produção para PR

O mesmo loop é executado contra URLs de produção. Você não precisa de um servidor de desenvolvimento, uma implantação de pré-visualização ou uma imagem Docker. Uma URL é suficiente para encontrar os problemas; emparelhe-a com as permissões padrão do GitHub que um agente de escrita de código já precisa (conteúdos e pull-requests para escrita), e um agente em segundo plano agendado pode abrir PRs noturnas contra os problemas que um mecanismo de a11y sinaliza: atributos alt, valores ARIA, aumentos de contraste, rótulos ausentes, correções estruturais. A revisão de PR é onde os excessos são detectados.

Uma ação mínima do GitHub noturna:

name: Varredura noturna do AccessLint

on:
  schedule:
    - cron: '0 6 * * *'
  workflow_dispatch:

permissions:
  contents: write
  pull-requests: write

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Instalar Claude Code e MCPs
        run: |
          npm i -g @anthropic-ai/claude-code
          npx playwright install --with-deps chromium
          claude mcp add accesslint -- npx -y @accesslint/mcp
          claude mcp add playwright -- npx -y @playwright/mcp@latest

      - name: Auditar e aplicar correções
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude -p \
            --allowedTools "mcp__accesslint__*,mcp__playwright__*,Read,Write,Edit,Glob,Grep" \
            "Auditar https://your-app.example.com usando os MCPs accesslint e playwright. Para cada violação, encontre o arquivo de origem neste repositório e aplique a correção. Use seu julgamento sobre o conteúdo (texto alternativo, redação de rótulo, cópia de cabeçalho); preserve a intenção do componente e evite refatorações invasivas. Não modifique testes."

      - name: Abrir PR se houver alterações
        env:
          GH_TOKEN: ${{ github.token }}
        run: |
          [ -z "$(git status --porcelain)" ] && exit 0
          git config user.name "accesslint"
          git config user.email "accesslint@users.noreply.github.com"
          git checkout -B a11y/nightly
          git add -A && git commit -m "a11y: correções mecânicas da auditoria do DOM renderizado"
          git push --force-with-lease origin a11y/nightly
          gh pr view a11y/nightly >/dev/null 2>&1 || gh pr create \
            --title "a11y: correções mecânicas da auditoria noturna" \
            --body "Correções automatizadas de uma auditoria ao vivo." \
            --base main --head a11y/nightly

Substitua pela sua URL e armazene ANTHROPIC_API_KEY como um segredo do repositório. Se nada mudou, a etapa sai limpa sem PR. Execuções subsequentes forçam o push para o mesmo branch, para que os revisores vejam um PR contínuo em vez de um novo a cada noite. A mesma estrutura funciona contra uma URL de implantação de pré-visualização se você preferir auditar builds de branch em vez de produção: adicione um