Para testar espaçamento de texto acessível, aplique em conjunto as quatro alterações do critério 1.4.12 da WCAG e procure perda de conteúdo ou função. O teste verifica se o site acomoda a preferência de leitura de quem aumenta entrelinha, distância entre parágrafos, letras e palavras. Faça a revisão no navegador com exemplos reais. Um card ou botão que aceita mais texto no arquivo de design ainda pode ter altura fixa ou corte invisível na implementação.

Observe como a leitura muda dentro do mesmo layout

Imagine um site de cursos com uma lista de oficinas. Cada bloco exibe um título, a descrição e uma ação. Um visitante ajusta o espaço entre letras para acompanhar palavras com mais conforto. Títulos que cabiam em duas linhas passam a ocupar três, uma palavra longa muda de linha e a ação desce. O bloco ainda pode funcionar bem se essas mudanças fizerem o conteúdo ganhar altura. O problema começa quando a última linha fica encoberta, o aviso encosta na ação ou um rótulo termina antes de dizer para onde o botão leva.

Faça uma lista das áreas que lidam com texto variável. Inclua o card mais apertado, um menu, a mensagem de erro mais longa e qualquer barra fixa que acompanhe a rolagem. Dê preferência a conteúdo tirado do site ou do CMS. Textos de preenchimento com palavras parecidas produzem uma amostra previsível demais. No acervo, o artigo sobre tipografia e dados reais em testes de design system oferece casos com nomes, acentos e combinações que ajudam a ampliar essa amostra.

Aplique os quatro ajustes de uma vez

O teste para o critério 1.4.12 considera altura de linha de pelo menos 1,5 vez o tamanho da fonte, espaço após parágrafos de pelo menos 2 vezes, espaçamento entre letras de pelo menos 0,12 vez e espaçamento entre palavras de pelo menos 0,16 vez. As quatro condições são avaliadas em conjunto, sem modificar outras propriedades de estilo. O objetivo é que o conteúdo e as funções continuem disponíveis com essas preferências. A aparência padrão da página pode usar valores diferentes conforme a composição editorial. Explicação do critério 1.4.12 no WAI.

Use uma ferramenta de teste que consiga substituir o espaçamento na página, ou monte uma folha temporária e aplique o ajuste no ambiente de revisão. Inspecione os valores calculados nos elementos críticos para confirmar que a substituição entrou de fato. Uma regra existente com especificidade alta, por exemplo, pode fazer um botão parecer aprovado quando a alteração nem chegou ao rótulo. A técnica C36 do WAI explica como permitir que o texto acomode o espaçamento definido pelo usuário. Técnica C36 sobre substituição de espaçamento.

Procure onde a expansão encontra uma altura fixa

Nos cards, veja se a descrição pode crescer e se o link acompanha essa expansão. Abra a interface em uma largura intermediária, onde sobra espaço para duas colunas, mas cada caixa ainda é estreita. Isso pode expor um problema que passa despercebido tanto no celular de uma coluna quanto no monitor largo. Quando um título maior empurra o restante, confira se os cards vizinhos continuam legíveis e se os limites visuais entre eles permanecem reconhecíveis.

Em botões, compare altura fixa com altura mínima e espaço interno. Um botão pode manter a presença visual com um mínimo e aceitar mais altura quando o texto pede duas linhas. Em campos de formulário, procure mensagens cortadas e rótulos que invadem outra região. Se a correção consiste em diminuir a fonte sempre que sobra pouca largura, você pode trocar um corte por uma leitura difícil. Experimente permitir quebra de linha, alargar a região de texto ou mover informações secundárias para outro lugar do componente.

Revise os estados que aparecem depois de uma ação

Abra o menu mais longo, provoque um erro e complete um fluxo de teste com o ajuste ligado. A página inicial às vezes passa porque só contém o estado padrão. Um aviso sobreposto pode cortar texto quando a pessoa tenta enviar um formulário, mesmo que todos os campos iniciais funcionem. Uma barra fixa pode ocupar mais altura depois da mudança e cobrir a ação seguinte. Teste se a pessoa consegue chegar ao controle, ativá-lo e ler a resposta com a mesma configuração.

Diferencie esse ensaio do teste de zoom. As duas condições podem revelar problemas parecidos, mas mudam a página de maneiras distintas. O zoom pode alterar a largura útil e disparar outro layout. Aqui, a pergunta é se a estrutura tolera as alterações de espaçamento de texto. Depois de verificar o critério isolado, vale repetir a tarefa com espaçamento e tela estreita juntos para conhecer o comportamento no uso real. A revisão de zoom e refluxo para preservar leitura e ações complementa essa etapa.

Documente o problema com uma condição reproduzível

Registre a página, o componente, a largura e o texto que expôs a falha. Inclua duas capturas no mesmo ponto do fluxo, uma com estilo padrão e outra com a preferência aplicada. Se o problema é uma região que esconde conteúdo, anote a propriedade que está cortando a caixa ou descreva a relação visual. “O rodapé cobre o botão confirmar quando a mensagem quebra em três linhas” orienta a investigação melhor que “a tela ficou apertada”.

Ao corrigir, revise a versão padrão junto da versão ajustada. Trocar uma altura fixa por mínima pode mudar o alinhamento de um grupo de botões em uma largura específica. Leve para o protótipo a regra de crescimento que foi aprovada no navegador e registre quais rótulos podem ocupar mais de uma linha. Se o componente também aparece em um modal ou em uma coluna lateral, valide pelo menos um exemplo nesses contextos. A propriedade que resolve o card isolado pode ter outro efeito quando o pai limita a altura ou a rolagem.

Inclua componentes que exibem texto dentro de um elemento com ícone. Na mensagem de erro, o ícone pode permanecer perto da primeira linha enquanto o restante da frase cresce. Se ele estiver centralizado verticalmente em uma caixa com várias linhas, confira se a associação entre o aviso e seu rótulo continua clara. Em uma ação que usa ícone e texto, confirme que ambos cabem juntos e que o ícone preserva seu significado visual. Dê espaço ao rótulo antes de decidir que partes do desenho podem ser reorganizadas.

Faça outra passagem com os textos de interface mais importantes em português, inclusive frases com palavras longas ou números junto da unidade. Em um card de evento, “Inscrições encerradas para esta turma” ocupa mais espaço que “Encerrado”. Se a regra da biblioteca só foi revista com o texto curto, aproveite o teste para corrigir a amostra e esclarecer em quais contextos a frase completa precisa aparecer. O objetivo é entregar ao time uma referência que represente o conteúdo que realmente chega ao componente.

Como saber se a correção ficou boa?

Escolha duas tarefas e execute do início ao fim com o espaçamento ativo. Por exemplo, encontre uma oficina na lista e envie uma pergunta sobre ela. A leitura do nome, da descrição, da ação e das mensagens de retorno precisa continuar possível. Observe se o conteúdo cresceu sem desaparecer e se as ações continuam ao alcance. Guarde a combinação que revelou o problema e volte a usá-la quando o componente receber novo texto ou mudar de largura. O melhor material de teste costuma ser a própria frase que quebrou o layout.