WCAG 1.4.12: Espaçamento de Texto

O que Esta Regra Significa

WCAG 1.4.12 Espaçamento de Texto pertence à Diretriz 1.4 (Distinguível) e tem como alvo um problema muito específico: muitas pessoas com dificuldades de leitura, baixa visão ou deficiências cognitivas precisam substituir o espaçamento de texto padrão de uma página da web para tornar o conteúdo legível para elas. Se o layout de um site quebra — o texto é cortado, botões se sobrepõem, rótulos de formulários desaparecem ou o conteúdo se torna inacessível — quando o espaçamento é aumentado, o site falha neste critério.

O critério define quatro propriedades de espaçamento que devem permanecer funcionais quando definidas simultaneamente para os seguintes valores mínimos:

• Altura da linha (espaçamento entre linhas): pelo menos 1,5 vezes o tamanho da fonte do elemento.
• Espaçamento entre letras (tracking): pelo menos 0,12 vezes o tamanho da fonte do elemento.
• Espaçamento entre palavras: pelo menos 0,16 vezes o tamanho da fonte do elemento.
• Espaçamento após parágrafos: pelo menos 2 vezes o tamanho da fonte do elemento.

Uma página passa neste critério se, depois que todas essas quatro substituições forem aplicadas, as pessoas ainda conseguirem ler todo o texto, operar todos os controles interativos e acessar todo o conteúdo da página sem rolagem horizontal em uma janela de visualização com 320 pixels CSS de largura, sem corte ou truncamento e sem sobreposição de conteúdo a ponto de se tornar ilegível ou inutilizável.

Uma página falha se a aplicação dessas substituições causar qualquer um dos seguintes problemas: texto é cortado por um contêiner com altura fixa e overflow: hidden; rótulos interativos ou texto de botões desaparecem; menus suspensos ou tooltips se sobrepõem ao conteúdo principal de forma inutilizável; ou qualquer conteúdo se torna permanentemente inacessível.

Importante: o critério não exige que você mesmo defina esses valores de espaçamento. Ele apenas exige que o seu layout não quebre quando a pessoa usuária (ou sua tecnologia assistiva, extensão de navegador ou folha de estilo do usuário) aplicar essas substituições. Os valores de espaçamento são limites para teste, não requisitos de design.

Há uma exceção explícita: componentes em que uma determinada apresentação visual é essencial para a informação transmitida — por exemplo, um logotipo, uma partitura musical renderizada em SVG ou uma imagem CAPTCHA — estão isentos. No entanto, essa exceção é restrita e não deve ser usada como desculpa genérica para isentar menus de navegação ou componentes de cards.

Este critério se aplica a todo o conteúdo de texto renderizado no navegador usando CSS, incluindo títulos, parágrafos, rótulos, texto de botões, texto de placeholder, itens de lista, células de tabela e links de navegação. Ele não se aplica a texto renderizado dentro de imagens ou elementos canvas, já que esses não são afetados por substituições de espaçamento via CSS.

Por Que Isso Importa

O espaçamento de texto afeta diretamente pessoas com uma ampla variedade de deficiências e perfis de leitura. De acordo com a Organização Mundial da Saúde, aproximadamente 2,2 bilhões de pessoas no mundo têm algum tipo de deficiência visual ou cegueira, e muitas delas usam zoom do navegador ou folhas de estilo personalizadas para tornar o conteúdo legível. Além da deficiência visual, estima-se que 15–20% da população mundial tenha dislexia, condição para a qual o aumento do espaçamento entre letras, entre palavras e da altura de linha são intervenções de legibilidade comprovadas — apoiadas por pesquisas, incluindo estudos publicados na revista Annals of Dyslexia.

Para pessoas com deficiências cognitivas como TDAH ou dificuldades de processamento, o espaçamento apertado do texto aumenta a carga cognitiva da leitura, tornando mais difícil acompanhar as linhas e distinguir palavras individuais. Essas pessoas frequentemente instalam extensões de navegador como o Readability Bookmarklet, Stylus ou configurações de acessibilidade em nível de plataforma que aplicam espaçamento personalizado a todos os sites que visitam.

Considere um cenário concreto: uma estudante universitária com dislexia visita uma plataforma de e-commerce turca para verificar a política de devolução de um produto antes de uma prova. Ela usa uma extensão de navegador que define a altura de linha em 1,7 e o espaçamento entre letras em 0,14em globalmente. Na página de detalhes do produto, o texto da política de devolução fica dentro de uma <div> de altura fixa, estilizada com height: 120px; overflow: hidden;. Com o espaçamento personalizado ativo, apenas as duas primeiras linhas ficam visíveis e não há mecanismo para revelar o restante. Ela não consegue concluir sua tarefa e perde a confiança na plataforma. Esta é precisamente a falha que a WCAG 1.4.12 foi projetada para evitar.

Além do acesso para pessoas com deficiência, há benefícios secundários. Layouts flexíveis e resilientes a variações de espaçamento tendem a ser mais robustos em mercados internacionais — o texto em turco, por exemplo, frequentemente contém formas de palavras mais longas devido à morfologia aglutinativa, e layouts que não conseguem acomodar variações de espaçamento também tendem a quebrar com strings mais longas. Layouts acessíveis também melhoram o SEO indiretamente: conteúdo legível e acessível tende a ter menores taxas de rejeição e melhores sinais de engajamento, que os mecanismos de busca consideram nos rankings.

Regras Relacionadas do Axe-core

WCAG 1.4.12 exige testes manuais e não pode ser totalmente verificada apenas por ferramentas automatizadas. Isso ocorre porque mecanismos automatizados não conseguem prever como um layout se comportará sob substituições de estilo aplicadas pela pessoa usuária sem realmente aplicar essas substituições e medir o resultado renderizado — um processo que exige inspeção visual ou comparação com renderização em modo headless. O mecanismo axe-core não inclui uma regra automatizada dedicada para 1.4.12 por esse motivo.

• Teste manual com o Text Spacing Bookmarklet: A abordagem de teste recomendada é o Text Spacing Bookmarklet criado por Steve Faulkner (agora mantido pela comunidade de acessibilidade). Esse bookmarklet injeta uma folha de estilo na página atual que define simultaneamente as quatro propriedades de espaçamento para seus valores mínimos de limite. A pessoa que testa então verifica visualmente (ou com um leitor de tela) se algum conteúdo está cortado, sobreposto ou inacessível. A abordagem com bookmarklet é o padrão referenciado no próprio documento Understanding do W3C para 1.4.12.
• Por que a automação é insuficiente: Scanners automatizados como o axe-core analisam o DOM e os estilos computados como existem no momento da varredura. Eles não simulam substituições de folhas de estilo do usuário nem re-renderizam a página para detectar estouro de layout ou corte causado por essas substituições. Um contêiner com overflow: hidden e altura fixa passará em uma varredura automatizada porque, isoladamente, isso não é um erro de acessibilidade — só se torna um quando o espaçamento é aumentado. Apenas aplicando a substituição e observando o resultado a pessoa avaliadora pode confirmar uma falha.
• Verificações automatizadas suplementares: Embora nenhuma regra do axe mapeie diretamente para 1.4.12, avaliadores também devem observar que a regra scrollable-region-focusable do axe e as regras de contraste de cor podem revelar problemas relacionados que contribuem para uma experiência ruim de espaçamento de texto. Além disso, a auditoria de acessibilidade do Lighthouse pode sinalizar contêineres de tamanho fixo em certos contextos, embora não especificamente para conformidade de espaçamento.

Como Testar

1. Instale o Text Spacing Bookmarklet. Acesse a página do Steve Faulkner Text Spacing Bookmarklet (disponível por meio do documento Understanding do W3C ou de uma pesquisa na web por "text spacing bookmarklet WCAG"). Arraste o bookmarklet para a barra de favoritos do seu navegador. Alternativamente, crie um favorito manualmente e cole o JavaScript do bookmarklet como a URL.
2. Abra a página em teste no seu navegador em seu nível de zoom padrão (100%). Navegue até a página ou componente que deseja avaliar — por exemplo, uma página de listagem de produtos, um formulário de checkout ou um menu de navegação.
3. Ative o bookmarklet. Clique no bookmarklet. Isso injeta CSS que define line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important e a margin-bottom de p para 2em !important em toda a página.
4. Inspecione visualmente toda a página. Role por todas as áreas de conteúdo. Procure por: texto cortado na parte inferior de um contêiner; rótulos de botões ou texto de links que desapareceram ou estão parcialmente ocultos; menus de navegação ou dropdowns em que itens se sobrepõem; campos de formulário em que o texto de placeholder ou rótulo está cortado; e diálogos modais ou tooltips em que o conteúdo ultrapassa o limite do contêiner.
5. Interaja com elementos interativos. Navegue com a tecla Tab por todos os elementos focáveis, ative dropdowns, abra modais e envie formulários. Confirme que todos os controles interativos permanecem operáveis e que seus rótulos visíveis estão totalmente legíveis com o espaçamento aplicado.
6. Teste com um leitor de tela para perda funcional. Com o bookmarklet ainda ativo, use NVDA com Firefox ou JAWS com Chrome para navegar pela página por títulos, marcos e elementos interativos. Confirme que a ordem de leitura e o conteúdo anunciado correspondem ao que uma pessoa vidente vê. Use o VoiceOver no Safari no macOS ou iOS para cobertura da plataforma Apple.
7. Teste com largura de janela de 320px. Redimensione a janela do navegador para 320 pixels CSS de largura (ou use o modo responsivo das DevTools do navegador). Reative o bookmarklet. Confirme que o conteúdo ainda é acessível sem rolagem horizontal e que o texto não está cortado em larguras de janela pequenas combinadas com espaçamento aumentado.
8. Documente as falhas. Para cada falha, registre: o tipo de elemento, sua classe ou ID CSS, a propriedade de espaçamento específica que causa a falha e uma captura de tela antes e depois da ativação do bookmarklet.

Como Corrigir

Contêiner de altura fixa cortando texto — Incorreto

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Contêiner de altura fixa cortando texto — Correto

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Rótulo de botão cortado por altura fixa do botão — Incorreto

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Rótulo de botão cortado por altura fixa do botão — Correto

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Tooltip ou dropdown transbordando sem rolagem — Incorreto

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Tooltip ou dropdown transbordando sem rolagem — Correto

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Espaçamento de parágrafo quebrando o layout do card — Incorreto

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Espaçamento de parágrafo quebrando o layout do card — Correto

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Erros Comuns

• Usar height em vez de min-height em contêineres de texto. Uma height fixa em qualquer elemento que contenha texto causará corte assim que a pessoa usuária aumentar a altura de linha ou o espaçamento entre letras. Substitua todas as alturas fixas em contêineres que contêm texto por min-height para que o contêiner possa crescer.
• Definir overflow: hidden em contêineres que contêm texto de parágrafo. Esta é a causa mais comum de falhas em 1.4.12. O overflow oculto corta o texto que se expande verticalmente quando o espaçamento aumenta. Use overflow: visible ou overflow: auto, dependendo do contexto de design.
• Usar white-space: nowrap em rótulos de botões ou links sem flexibilidade adequada do contêiner. Quando o espaçamento entre letras aumenta, o texto com nowrap pode ultrapassar seu elemento pai ou ser cortado, especialmente em itens de navegação de largura fixa.
• Posicionar absolutamente elementos de rodapé ou de ação dentro de um card de altura fixa. Quando o conteúdo do card cresce devido às substituições de espaçamento, elementos posicionados absolutamente na parte inferior do card se sobrepõem ao texto. Use layout em coluna com flexbox em vez disso.
• Aplicar max-height com overflow: hidden a seções expansíveis que estão em seu estado expandido. Acordeões animados que se expandem para um valor de max-height calculado com base em medidas em pixels cortarão o texto nesse limite de pixels quando o espaçamento for substituído, mesmo quando estiverem totalmente abertos.
• Usar CSS line-clamp (webkit-line-clamp) sem um mecanismo visível para expandir o conteúdo completo. Limitar o texto a um número fixo de linhas é aceitável apenas se houver um controle claramente rotulado e acessível por teclado para revelar o conteúdo completo. Limitar sem qualquer mecanismo de expansão falha em 1.4.12.
• Confiar em JavaScript para definir dinamicamente alturas de elementos em pixels. Scripts que medem alturas de elementos e depois fixam esses valores em pixels como estilos inline vão travar o contêiner em um tamanho que ignora as substituições de espaçamento do usuário. Use dimensionamento intrínseco e deixe o CSS cuidar do layout.
• Presumir que varreduras automatizadas de acessibilidade detectarão todas as falhas de 1.4.12. Equipes que dependem exclusivamente de axe ou Lighthouse sem executar o Text Spacing Bookmarklet deixarão passar todas as falhas de espaçamento baseadas em layout. Testes manuais com o bookmarklet são obrigatórios para este critério.
• Não testar menus de navegação e mega-menus com o bookmarklet. Componentes de navegação são frequentemente construídos com alturas fixas em pixels e overflow hidden para criar um resultado visual polido. Eles também estão entre os componentes que mais falham em 1.4.12 porque o aumento de espaçamento faz com que itens de menu quebrem linha e sejam cortados.
• Tratar os valores de espaçamento como requisitos de design em vez de limites de teste. Algumas equipes respondem a 1.4.12 atualizando seus estilos padrão para corresponder aos valores de limite, o que é desnecessário e pode conflitar com a intenção do designer. O critério apenas exige que o layout não quebre quando esses valores forem aplicados — não que eles sejam o padrão.

Relação com os Regulamentos de Acessibilidade da Turquia

WCAG 1.4.12 Espaçamento de Texto é diretamente relevante para o emergente arcabouço legal de acessibilidade da Turquia. O desenvolvimento recente mais significativo é a Circular Presidencial 2025/10, publicada no Diário Oficial nº 32933 em 21 de junho de 2025. Essa circular estabelece obrigações vinculantes para uma ampla gama de organizações para garantir acessibilidade digital em toda a sua presença na web e em aplicativos móveis.

A circular abrange um amplo conjunto de tipos de entidades. Instituições e órgãos públicos em todos os níveis de governo são obrigados a cumprir. Entidades do setor privado dentro do escopo incluem plataformas de e-commerce, bancos e instituições financeiras, hospitais e prestadores de serviços de saúde, empresas de telecomunicações com 200.000 ou mais assinantes, agências de viagem, empresas de transporte privado e escolas privadas autorizadas pelo Ministério da Educação Nacional (MoNE). Essas organizações são obrigadas a atender à conformidade de Nível AA com a WCAG, que inclui 1.4.12, como parte de suas obrigações sob a circular.

A conformidade em Nível AA também é um pré-requisito para obter o Accessibility Logo (Erişilebilirlik Logosu) emitido pelo Ministério da Família e Serviços Sociais (Aile ve Sosyal Hizmetler Bakanlığı). Esse selo sinaliza às pessoas usuárias, especialmente aquelas com deficiência, que um produto digital foi auditado e atende ao padrão de acessibilidade exigido. Para organizações que atendem à comunidade de pessoas com deficiência na Turquia — estimada em vários milhões de pessoas, incluindo aquelas com deficiências visuais, cognitivas e de leitura — o selo tem peso tanto reputacional quanto regulatório.

Na prática, uma plataforma de e-commerce turca que usa contêineres de descrição de produto de altura fixa com overflow: hidden, ou um portal governamental cujo menu de navegação corta conteúdo quando uma pessoa usuária aplica substituições de espaçamento por meio de uma extensão de navegador ou configuração de acessibilidade do sistema operacional, não está apenas falhando com suas pessoas usuárias — está potencialmente em não conformidade com as obrigações estabelecidas pela circular 2025/10. Falhas de Espaçamento de Texto são particularmente relevantes para pessoas turcas com dislexia e baixa visão que dependem de ferramentas de espaçamento personalizado, e para pessoas que acessam serviços governamentais ou comerciais em dispositivos móveis, onde configurações de tamanho de texto do sistema operacional também podem desencadear instabilidade de layout semelhante às substituições de espaçamento.

Organizações que buscam o Erişilebilirlik Logosu devem incluir uma auditoria manual de espaçamento de texto usando o Text Spacing Bookmarklet como etapa obrigatória em seu processo de auditoria de acessibilidade, juntamente com varreduras automatizadas e testes com leitores de tela. Corrigir falhas de 1.4.12 — principalmente substituindo alturas fixas por min-height, removendo overflow: hidden desnecessário de contêineres de texto e adotando técnicas flexíveis de layout em CSS — geralmente é viável sem mudanças significativas de design e representa uma melhoria de alto valor e baixo custo na acessibilidade de qualquer serviço digital turco.