por que meu site quebra quando você aumenta o tamanho do texto

O texto que não pode aumentar é um ponto crítico conhecido da WCAG

Um site que "quebra" assim que um cliente aumenta o tamanho do texto quase sempre resulta de tamanhos fixos: texto, botões ou contenedores definidos em pixels em vez de unidades que se ajustam proporcionalmente. Quando um cliente aumenta o tamanho da fonte no navegador, um caixa com altura fixa em pixels permanece do mesmo tamanho, e o texto escapa dela, sobrepõe-se a outros elementos ou é cortado. Menus que se encaixam perfeitamente no tamanho padrão, painéis expansíveis que não crescem e botões cujo texto ultrapassa a borda são os sintomas mais comuns.

Este não é um defeito estético, mas um problema funcional: se uma etiqueta se torna ilegível ou um botão não pode mais ser clicado porque o texto sobrepõe-se a ele, um cliente não consegue concluir uma etapa do processo de compra. Isto afeta os mesmos pontos vulneráveis que na navegação por teclado de todo o pedido: um problema de escala que parece inofensivo nas páginas principais pode ser decisivo na etapa de compra ou no ecrã de início de sessão. Títulos e subtítulos também correm risco: se um elemento de estrutura colapsa durante o aumento, a ordem de leitura fica estranha, algo que também ocorre na narrativa mais ampla sobre títulos, estrutura e navegação.

Onde está isso na WCAG 2.1: o critério de aumento

A WCAG 2.1 estabelece que o texto deve poder aumentar até uma certa percentagem sem que o conteúdo ou a funcionalidade sejam perdidos; este é o princípio subjacente ao critério de redimensionamento de texto, como indicado na própria directiva. Na prática, uma análise testa isto carregando a página em vários tamanhos de texto e verificando se o texto é cortado, sobreposto ou fica ilegível. O que um teste automatizado não consegue ver é se a página ainda é agradável de usar ou apenas tecnicamente "não quebrada" — essa diferença faz parte das coisas que uma análise automatizada não pode avaliar.