10 posts
O tema claro do Capivara estava com textos apagados e um email cortado no header. Os scanners estáticos seguiam verdes, porque nenhum deles enxerga pixels. Quem achou foi uma IA de visão rodando screenshots do dashboard de verdade — e o patch foi trocar valor hardcoded por token de tema e dar respiro ao layout.
The Capivara light theme had washed-out text and a truncated email in the header. Static scanners stayed green, because none of them can see pixels. The one that caught it was a vision AI running screenshots of the real dashboard — and the patch was swapping hardcoded values for theme tokens and giving the layout room to breathe.
Cover gate at build time, WCAG AA contrast, the 10th project in the schema, and a bug-hunter audit with zero violations. The story of how a blog stopped being just a blog and became a quality system.
Gate de capas no build, contraste WCAG AA, o 10o projeto no schema, e uma auditoria bug-hunter com zero violacoes. A historia do blog que parou de ser so um blog e virou um sistema com qualidade.
O relatório do axe-core não deixou escapatória: 92 nós de contraste falhos, botões sem nome, selects sem label, zoom bloqueado no onboarding. Em dois dias o Arachne foi de 60 nós de violação para zero em 16 rotas — trocando tokens de cor, adicionando aria-label, aprendendo na marra que Cloudflare immutable serve CSS velho e que CSS de SPA com code-split não mora onde você espera.
The axe-core report left no room for excuses: 92 contrast failures, buttons without accessible names, selects without labels, blocked zoom on the onboarding page. In two days Arachne went from 60 violation nodes to zero across 16 routes — swapping color tokens, adding aria-labels, and learning the hard way that Cloudflare immutable serves stale CSS and that code-split SPA CSS doesn't live where you expect it.
When the theme toggle animation revealed the old theme instead of the new one, the fault was not in the CSS — React had not committed the state in time.
Quando a animacao de troca de tema revelava o tema antigo em vez do novo, a culpa nao era do CSS — era do React nao ter commitado o estado a tempo.
Uma auditoria de acessibilidade no LifeLog virou uma caçada a quatro armadilhas de contraste: comentários de código com 3.9:1, badges de projeto que falhavam em 4 das 6 paletas, um seletor de tema que o scoping do Astro quebrava em silêncio, e o alpha que o axe-core se recusa a compor. No fim: 14 rotas x temas sem violações serious/critical.
An accessibility audit on LifeLog turned into a hunt for four contrast traps: code comments at 3.9:1, project badges failing in 4 of 6 palettes, a theme selector that Astro scoping silently broke, and the alpha that axe-core refuses to compose. The result: 14 routes x themes with zero serious/critical violations.