Espaçamento do texto: como testar páginas de treinamento

Para testar o espaçamento do texto numa página de treinamento, aplique os quatro valores de referência e confira se o conteúdo continua disponível e utilizável. Procure palavras cortadas, sobreposição e controles que deixam de funcionar. A revisão precisa observar o que acontece depois do ajuste, além de conferir os números informados no estilo.

O guia de acessibilidade no treinamento corporativo organiza a avaliação do percurso. Aqui, o recorte são páginas em HTML com estilos CSS, como instruções e materiais publicados no portal. Há um cálculo próprio e uma demonstração em texto real, sem alterar um ambiente de treinamento ou apresentar o exercício como auditoria completa.

O requisito trata da adaptação, não de uma aparência única

O critério 1.4.12 das WCAG 2.2, de nível AA, exige que não haja perda de conteúdo ou funcionalidade ao aplicar conjuntamente os espaçamentos indicados, sem mudar outras propriedades de estilo. Ele não obriga que toda página tenha esses valores como apresentação inicial.

A explicação do W3C sobre espaçamento do texto esclarece que o conteúdo deve suportar o ajuste escolhido pelo usuário. Também não exige criar um controle próprio na página para isso. Por essa razão, conferir o visual inicial e testar a adaptação são verificações diferentes.

Uma instrução que ocupa duas linhas pode precisar de mais espaço depois da mudança. O ponto a observar é se a caixa acompanha esse crescimento e se a atividade continua compreensível. Manter a altura do cartão à custa de esconder parte da frase não preserva a informação necessária ao estudo.

Calcule os quatro valores a partir da fonte do texto

Os fatores do critério são: altura de linha de pelo menos 1,5 vez o tamanho da fonte; espaço após parágrafos de pelo menos 2 vezes; entre letras de pelo menos 0,12 vez; e entre palavras de pelo menos 0,16 vez. Aplique o conjunto pertinente ao idioma e ao sistema de escrita, respeitando as exceções do documento.

Exemplo didático T043: para uma fonte de 16 pixels CSS, as contas resultam em 24 px, 32 px, 1,92 px e 2,56 px. O tamanho de 16 px foi escolhido para tornar o cálculo conferível; não é uma recomendação universal de tamanho de fonte. A figura organiza as relações e o bloco em HTML abaixo permite observar o efeito no texto.

T043 · Base do cálculo

Fonte de 16 pixels CSS, escolhida para esta demonstração. Não é uma recomendação universal de tamanho de letra.

Altura de linha: 24 px

16 × 1,5 = 24 px. É a altura da caixa da linha, não um vão vazio de 24 px.

Após parágrafos: 32 px

16 × 2 = 32 px. No modelo, esse espaço separa os dois parágrafos.

Entre letras: 1,92 px

16 × 0,12 = 1,92 px de espaçamento adicional.

Entre palavras: 2,56 px

16 × 0,16 = 2,56 px de espaçamento adicional.

Conferência necessária

Aplicar o conjunto e examinar conteúdo e uso. Cálculos e demonstração não validam a página inteira.

Descrição da figura

O exemplo próprio T043 usa a mesma fonte de 16 pixels CSS como base de quatro contas. Altura de linha: 16 vezes 1,5 resulta em 24 pixels, altura da caixa da linha, sem representar um vão vazio de 24 pixels. Espaço após parágrafos: 16 vezes 2 resulta em 32 pixels, separando os dois parágrafos do modelo. Entre letras: 16 vezes 0,12 resulta em 1,92 pixel de espaçamento adicional. Entre palavras: 16 vezes 0,16 resulta em 2,56 pixels de espaçamento adicional. Os quatro valores se aplicam conjuntamente na demonstração. A figura apresenta cálculos, sem comprovar ausência de corte, sobreposição ou falha de uso na página inteira. Os dois blocos em HTML no artigo usam frases próprias para demonstrar os estilos. No celular, as contas são apresentadas em texto HTML.

A referência da MDN para line-height explica que um número sem unidade multiplica o tamanho da fonte do próprio elemento. No exemplo, line-height: 1.5 com fonte de 16 px produz uma altura de linha de 24 px. Essa altura não é um vão vazio de 24 px entre as letras: ela se refere à caixa da linha.

Observe a demonstração com o mesmo texto e a mesma fonte

Os dois blocos T043 usam as mesmas frases, fonte Arial de 16 px e altura de linha de 1,5. No primeiro, o espaço entre parágrafos é 16 px e os acréscimos entre letras e palavras são zero. No segundo, o conjunto do teste está aplicado: altura de linha de 24 px, espaço entre parágrafos de 32 px, entre letras de 1,92 px e entre palavras de 2,56 px.

O segundo bloco pode ocupar mais linhas e altura. O contêiner não tem altura fixa para esconder esse crescimento. Compare as frases completas e a separação dos parágrafos, inclusive na tela estreita. Como o primeiro bloco já usa altura de linha de 1,5, essa propriedade permanece igual na comparação.

Esta é uma demonstração de estilos definidos no próprio artigo. Ela não aplica uma folha de estilos do usuário à página inteira e não valida menus, formulários ou uma plataforma de cursos. Os valores efetivos e a integridade dos dois blocos precisam ser conferidos na publicação; a aparência do modelo no editor não basta.

.amostra-espacamento p {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
  margin: 0;
}
.amostra-espacamento p + p {
  margin-top: 2em;
}

Neste modelo, 2em separa dois parágrafos de 16px.
O contêiner deve permitir a expansão do texto.
O trecho ilustra o cálculo e não é uma ferramenta
para testar automaticamente toda a página.

Faça o teste no percurso de leitura e de uso

A técnica C36 do W3C apresenta a conferência de conteúdo que precisa quebrar linhas. Ela orienta usar zoom de 100%, aplicar as medidas com um recurso apropriado e verificar se não houve corte ou sobreposição. Em páginas responsivas, a técnica pede examinar os diferentes layouts. Técnicas são formas documentadas de atender ao critério, não um procedimento obrigatório único.

Escolha uma página e uma tarefa, como ler a instrução e abrir o material correspondente. Registre a versão e a apresentação inicial. Com os responsáveis pelo ambiente, aplique os quatro valores por um mecanismo adequado de teste e confirme que realmente chegaram aos elementos. Se uma regra não foi aplicada, esse ensaio ainda não permite julgar a resposta do componente àquela mudança.

Percorra o texto até o fim e acione os controles necessários. Inclua rótulos longos e mensagens de orientação. Quando houver uma perda, registre o elemento e o efeito concreto: uma última palavra escondida, uma instrução coberta pelo bloco seguinte ou uma ação que ficou inacessível. Esse registro orienta a correção melhor que uma anotação genérica de problema visual.

Corrija o contêiner sem apagar a condição da atividade

A técnica C36 explica que a caixa precisa ter espaço para o texto crescer ou poder expandir. Uma altura fixa pode exigir revisão quando esconde conteúdo após o ajuste. Examine a causa com quem mantém a implementação, preserve uma cópia recuperável e teste novamente o componente corrigido.

Não encurte uma regra essencial da atividade apenas para manter o tamanho do cartão. A revisão editorial pode retirar uma repetição, mas deve preservar o que o participante precisa compreender e executar. Se uma instrução muda, compare conteúdo e objetivo antes de liberar a nova versão.

Se o desenho abrevia um texto com reticências, investigue como a informação completa fica disponível. A explicação do W3C admite situações em que existe um mecanismo para revelar o conteúdo. Não classifique toda abreviação como falha nem aprove uma palavra cortada sem conferir o acesso ao restante.

Para ajustes do portal, consulte o roteiro de planejamento e teste de um ambiente customizável de treinamento. O teste de contraste de textos e controles examina outra parte da leitura. Passar por um desses recortes não substitui o outro.

Registre os valores, o resultado e o alcance da revisão

Página, versão e tarefa examinadas:
Responsável, data e cópia anterior:
Idioma e sistema de escrita do conteúdo:
Navegador, largura e zoom utilizados:
Mecanismo de teste e alcance da aplicação:
Fonte efetiva dos elementos examinados:
Altura de linha aplicada:
Espaço após parágrafos aplicado:
Espaço entre letras e entre palavras:
Valores efetivos conferidos na página:
Conteúdo cortado, sobreposto ou indisponível:
Funções e continuidade do percurso testadas:
Correção, responsável e nova conferência:
Layouts e componentes ainda pendentes:
Limites da avaliação e evidências guardadas:

Este roteiro se concentra em HTML e CSS. A explicação do critério informa que ele não se aplica atualmente ao PDF; um arquivo desse tipo precisa de avaliação adequada ao seu formato. Aumentar o zoom também é uma verificação diferente de alterar o espaçamento. Não use uma captura ampliada como prova de que os quatro valores foram aplicados.

Nesta publicação, o alcance da conferência é a demonstração T043, a apresentação do artigo e seus recursos. Não houve alteração global de espaçamento, teste com participantes ou avaliação integral de uma plataforma. A auditoria de acessibilidade exige definir os demais critérios, páginas, funções e ambientes pertinentes.

Perguntas frequentes sobre espaçamento do texto

Preciso usar esses valores como aparência padrão de todas as aulas?

Não. O critério 1.4.12 trata de suportar a adaptação do espaçamento sem perder conteúdo ou função. A apresentação inicial pode ter outra configuração.

Aumentar o zoom testa o espaçamento do texto?

Não substitui esse teste. Identifique os quatro valores aplicados e examine o resultado no percurso. A ampliação precisa de uma conferência própria.

Uma caixa maior depois do ajuste é um erro?

Não por si só. Ela pode precisar crescer para manter a informação. Confira se o texto continua disponível e se as funções e o restante do percurso permanecem utilizáveis.

O exemplo em HTML comprova a acessibilidade de toda a plataforma?

Não. Ele demonstra valores e a expansão de dois blocos. A avaliação do ambiente precisa declarar escopo, critérios, versões e limites dos testes realizados.

Se sua equipe precisa organizar conteúdo, critérios e responsáveis pela revisão do treinamento, converse conosco sobre esse planejamento. Podemos ajudar a delimitar o percurso e as entregas. Correção técnica e avaliação especializada precisam de escopos e profissionais definidos.