Pular para o conteúdo
Development

Uma checagem de a11y repetível para o imperfectsystems.com

Por Victor Da Luz•
accessibilitycicloudflaredev-logsite

Enquanto trabalhava numa mudança de UI anterior, encontrei uma lacuna: os critérios de conclusão deste site para mudanças de UI dizem para rodar npm run a11y antes de considerar algo pronto. Esse script não existia neste site. Procurei por qualquer config, ferramenta ou passo de CI relacionado a a11y e não achei nada. Então rodei o npx @axe-core/cli contra um servidor astro preview local, como algo avulso, obtive zero violações e segui em frente. Mas uma execução avulsa não é uma checagem, é uma foto de um momento. O follow-up: transformar isso num script real e repetível.

Não precisei projetar isso do zero. O vdaluz.com, no mesmo workspace, já roda uma checagem de a11y local do jeito certo: pa11y-ci (o executor do axe, WCAG2AA) conduzido pelo start-server-and-test, apontado para um servidor wrangler dev rodando o Worker de verdade já compilado do Cloudflare, não o astro preview. Essa diferença importa, o astro preview é o servidor de desenvolvimento do Node, e não reflete o ambiente Worker em que o site realmente roda em produção.

"a11y:server": "wrangler dev --config dist/server/wrangler.json --port 8787",
"a11y:run": "pa11y-ci",
"a11y:ci": "start-server-and-test a11y:server http://localhost:8787 a11y:run",
"a11y": "npm run build && npm run a11y:ci"

Portar a config foi a parte fácil. O que eu não tinha certeza se ia funcionar direito: este site tem bindings reais do Cloudflare que a config do vdaluz.com não tem, um namespace KV e um secret de senha, ambos ligados a uma rota de playtest protegida por senha. Eu esperava precisar de flags extras ou de um override local de bindings para o wrangler dev inicializar sem erro.

Não precisei. O wrangler dev --config dist/server/wrangler.json simplesmente resolveu tudo para equivalentes locais, em memória, por conta própria:

env.SESSION                KV Namespace   local
env.GAME_FILES             KV Namespace   local
env.PLAYTEST_PASSWORD      Environment Variable   local

Sem config, sem flags, ele leu o dist/server/.dev.vars para pegar o secret e subiu KV em memória para os dois namespaces automaticamente. O servidor subiu, serviu todas as minhas seis URLs alvo com 200, e o pa11y-ci reportou 6/6 aprovados, com 0 erros.

A única categoria de página que deixei de fora de propósito: as rotas de playtest protegidas por senha. Elas são bloqueadas e marcadas como noindex, então não fazem realmente parte da superfície pública que essa checagem existe para proteger, e testá-las significaria embutir um cookie de autenticação falso na config do pa11y sem nenhum benefício real.

Tarefa pequena, mas fecha um ciclo: futuras issues de mudança de UI neste repositório agora têm a mesma checagem local repetível que o vdaluz.com já tinha há um tempo, em vez de um workaround que eu teria que reinventar toda vez.

Leitura relacionada

Você também pode achar útil

AdGuard

AdGuard para iOS

Bloqueio de anúncios e rastreadores em todo o sistema no iOS, sem necessidade de um servidor DNS separado.

Como afiliado da AdGuard, ganho com compras qualificadas.

Saiba mais
Proton

Proton Drive

Armazenamento em nuvem criptografado, da equipe por trás do Proton Mail.

Como parceiro da Proton, ganho com compras qualificadas dos serviços de privacidade e segurança da Proton (Pass, Mail, VPN, Drive).

Saiba mais
NordPass

NordPass

Gerenciador de senhas da equipe por trás da NordVPN, com um plano gratuito.

Como afiliado da NordPass, ganho com compras qualificadas.

Saiba mais