Acessibilidade: por que texto TODO EM MAIÚSCULAS prejudica a leitura
Caixa alta funciona bem num rótulo de duas palavras e é uma escolha ruim para qualquer coisa mais longa. Trechos longos em maiúsculas são mais lentos de ler, jogam fora informações que a escrita normal carrega (“US” é o país ou o pronome “us”, nós?), e os leitores de tela em geral ignoram as maiúsculas: a ênfase que você quis dar some, enquanto uma ou outra palavra curta acaba soletrada letra por letra. O caminho acessível é escrever o texto com maiúsculas e minúsculas normais e, onde o design realmente pede caixa alta, aplicá-la com CSS, embora nem isso seja infalível.
Por que a caixa alta é mais difícil de ler em trechos longos
Pesquisadores comparam a leitura em caixa alta e em minúsculas há quase um século. O artigo de Kevin Larson para a Microsoft, “The Science of Word Recognition”, resume estudos que remontam a Woodworth, em 1938: os leitores percorriam trechos em minúsculas de 5% a 10% mais rápido do que os mesmos trechos compostos em maiúsculas.
A explicação popular é o “formato da palavra” (word shape): palavras em minúsculas têm contornos característicos graças às hastes ascendentes e descendentes, enquanto as maiúsculas transformam qualquer palavra num retângulo. Larson argumenta que as evidências não sustentam essa ideia. Reconhecemos as palavras pelas letras, e as minúsculas vencem principalmente porque é com elas que praticamos. Pessoas obrigadas a ler muito texto em maiúsculas ficam mais rápidas nisso.
É uma correção útil, mas não salva o parágrafo em caixa alta do seu site. Seus leitores não tiveram essa prática, e o custo pesa mais justamente para quem já acha a leitura cansativa. A página da MDN sobre text-transform alerta que grandes trechos de texto em maiúsculas “may be difficult for people with cognitive concerns such as Dyslexia to read” (podem ser difíceis de ler para pessoas com dificuldades cognitivas, como a dislexia). O guia de estilo do GOV.UK mostra o problema com o próprio exemplo: “DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.” (não use letras maiúsculas em grandes blocos de texto, porque fica bem difícil de ler).
As maiúsculas jogam informação fora
Misturar maiúsculas e minúsculas não é enfeite. Uma maiúscula avisa que a palavra é um nome, uma sigla ou o início de uma frase. Leia isto e repare quanto você precisa adivinhar:
PLEASE CONTACT US ABOUT POLISH ORDERS IN MARCH. NASA SAYS HI.Os Estados Unidos (US) ou “us” (nós)? Clientes da Polônia (Polish) ou lustra-móveis (polish)? O mês (March) ou uma passeata (march)? Depois que o texto foi digitado em caixa alta, o software também não consegue recuperar a resposta. Passe essa linha pela opção Frase (sentence case) do nosso conversor de maiúsculas e minúsculas e você recebe “Please contact us about polish orders in march. Nasa says hi.” Ela põe tudo em minúsculas e coloca maiúscula no início de cada frase, que é tudo o que ela tem como saber. Os nomes precisam ser corrigidos à mão.
O que os leitores de tela fazem com texto em caixa alta
Quase sempre, nada. Os leitores de tela falam as palavras e não mencionam se estão em maiúsculas. Em 2022, o consultor de acessibilidade Adrian Roselli testou um texto jurídico em caixa alta com JAWS, NVDA, Narrator, Orca, VoiceOver e TalkBack nas configurações padrão, e nenhum deles avisou o ouvinte de que o texto estava em maiúsculas. Opções como a mudança de tom do NVDA ou o “say cap” servem para percorrer o texto um caractere por vez, não para frases lidas em voz alta.
Isso tem duas consequências:
- Maiúsculas usadas para dar sentido se perdem. Se a caixa alta é o seu jeito de dizer “isto é importante” (um aviso, uma cláusula de contrato, uma palavra gritada), quem ouve escuta um texto comum. Quem lê em braile é a exceção, porque o braile tem um sinal de maiúscula.
- Algumas palavras curtas são soletradas. Os sintetizadores de voz tentam adivinhar se uma sequência de maiúsculas é uma sigla. Roselli cita “AM”, “ADD” e “IT” como palavras que os leitores de tela muitas vezes soletram quando estão em caixa alta, e profissionais da área relatam “CONTACT US” saindo como “contact U.S.”.
Quais palavras são soletradas depende do leitor de tela, da voz, das configurações do usuário e às vezes do navegador, e isso muda de uma versão para outra. Não dá para prever com segurança, e esse é o melhor argumento para manter palavras importantes fora da caixa alta desde o início.
Nunca simule espaçamento entre letras com espaços
Maiúsculas bem espaçadas são um recurso de design popular, e digitá-las como S A L E é o pior jeito de conseguir esse visual. Os leitores de tela leem cada letra isoladamente, e as WCAG listam “using white space characters to control spacing within a word” (usar caracteres de espaço em branco para controlar o espaçamento dentro de uma palavra) como uma falha (técnica F32). Use a propriedade CSS letter-spacing, como no exemplo abaixo.
Use CSS text-transform: uppercase em vez de digitar em maiúsculas
Se um botão, uma aba ou um título pequeno precisa aparecer em maiúsculas, escreva o texto normalmente e deixe o CSS mudar a aparência:
<button class="caps">Add to basket</button>
.caps {
text-transform: uppercase;
letter-spacing: 0.06em; /* capitals need a little extra room */
}O texto no seu HTML continua sendo “Add to basket”, e isso traz algumas vantagens:
- Redesenhos ficam baratos. Tirar as maiúsculas depois é uma linha de CSS, e não uma caçada por todos os rótulos e arquivos de tradução.
- O texto vai bem para qualquer lugar. Feeds, exportações e todos os outros lugares aonde sua folha de estilos não chega recebem as palavras com maiúsculas e minúsculas corretas.
- O navegador cuida dos idiomas por você. Os navegadores aplicam as regras de cada idioma a partir do atributo
lang. A referência da MDN sobre text-transform lista essas regras: em caixa alta, as vogais gregas perdem os acentos, por exemplo, e o turco faz par deicomİ. Com CSS, o texto grego armazenado mantém os acentos; maiúsculas digitadas os perderiam para sempre.
Mas não espere milagres. Os navegadores podem repassar o texto transformado à tecnologia assistiva. Um bug do WebKit registrado em 2016, ainda aberto, descreve o VoiceOver lendo um botão “Add to Cart” estilizado em maiúsculas como “A D D to cart”, e desenvolvedores relataram o mesmo com o VoiceOver no Chrome. Além disso, maiúsculas feitas com CSS continuam sendo maiúsculas para quem enxerga, então o custo dos trechos longos não muda. Trate o text-transform como o jeito certo de aplicar caixa alta a poucas palavras, não como licença para compor parágrafos inteiros assim.
Quando as maiúsculas vão bem, e o que usar no lugar delas
As maiúsculas não são proibidas. As WCAG não têm nenhum critério de sucesso contra elas, e trechos curtos causam pouco problema. Nós as manteríamos para:
- Siglas de verdade, como NASA, HTML e BBC.
- Rótulos curtos, abas e aquela linha pequena acima de um título (o chamado “eyebrow”). Nossa regra prática é no máximo três palavras, com a caixa alta aplicada via CSS.
- Uma única palavra de selo, como “Novo”, desde que nada dependa de ela ser ouvida como algo especial.
Para todo o resto, recorra a algo que sobreviva a uma mudança de estilo ou à leitura em voz alta:
- Ênfase: use
<strong>e estilize com peso ou tamanho. A maioria dos leitores de tela também não anuncia negrito por padrão, então coloque o que importa nas próprias palavras: “Não dá para desfazer isso” diz mais do que qualquer formatação. - Avisos: um título curto e direto (“Excluir sua conta apaga todos os seus arquivos”) faz o trabalho que um bloco em caixa alta tentava fazer, e é lido em voz alta.
- Texto jurídico: contratos nos EUA costumam compor as isenções de garantia em maiúsculas porque o Uniform Commercial Code exige que elas sejam “conspicuous” (bem visíveis). A definição do código não exige maiúsculas no corpo de um documento: letra maior, tipo, fonte ou cor contrastantes, ou marcas que destaquem o texto também valem. Consulte quem redige seus termos antes de mudá-los, mas a caixa alta não é o único caminho.
O “versalete” Unicode decorativo não é maiúscula de verdade
Nosso Gerador de texto Unicode estilizado tem um estilo Versalete (small caps), e vale ser honesto sobre o que ele produz. Digite “Sale on now” e você recebe “sᴀʟᴇ ᴏɴ ɴᴏᴡ”. Essas não são letras desenhadas em tamanho menor; são outros caracteres, em grande parte emprestados de alfabetos fonéticos. Algumas letras não têm versão em versalete, e é por isso que o “s” continua um s minúsculo comum e o “q” sai como “ǫ”, um o com ogonek.
Para o software, são símbolos sem relação nenhuma com as letras comuns, então os corretores ortográficos tendem a marcá-los e buscas pela palavra normal podem não encontrá-los. Os leitores de tela lidam com caracteres parecidos de forma muito inconsistente; quando letras semelhantes de “falso negrito” foram testadas, alguns leitores de tela pularam as palavras por completo. Nosso guia sobre como escrever para leitores de tela mostra esse teste passo a passo. Use esses estilos como decoração ao lado de texto comum, nunca em palavras que alguém precisa ouvir.
Checklist rápido para maiúsculas
- Digite o texto normalmente, com maiúsculas e minúsculas, e aplique a caixa alta com
text-transform. - Limite a caixa alta a poucas palavras. Nunca um parágrafo.
- Acrescente um pouco de
letter-spacingàs maiúsculas, e nunca use espaços para isso. - Coloque o sentido nas palavras, não na formatação.
- Ouça seus principais botões e rótulos com VoiceOver e NVDA antes do lançamento.
- Mantenha letras Unicode parecidas longe de tudo o que importa.
Para os lugares onde as maiúsculas realmente têm vez na escrita, das siglas aos títulos de textos jurídicos, veja nosso guia sobre quando usar maiúsculas.
