Texto redimensionado
O que a norma pede
O texto pode ser ampliado até 200% sem tecnologia assistiva, sem perder conteúdo ou função e sem obrigar a rolar para os lados para ler uma linha.
- 1.4.4 (AA)
- 1.4.8 (AAA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Desenhe componentes que crescem junto com o texto e teste o leiaute com textos 200% maiores. Evite texto em imagem, que perde nitidez ao ser ampliado.
Cabeçalho com fonte ampliada
Cabeçalho com logo, busca e menu.
Errado: Altura fixa
No protótipo
Cabeçalho de 64 px fixos.
Com fonte a 200%, o menu sai do cabeçalho.
Certo: Altura flexível
No protótipo
Cabeçalho que cresce e reorganiza o menu.
Tudo continua visível.
Defina fontes e espaçamentos em rem e em, evite alturas fixas em componentes com texto e nunca bloqueie o zoom do navegador. Fontes em pixels podem ignorar o tamanho escolhido pela pessoa.
Tamanho de fonte
Estilo base de textos.
Errado: px fixos
body { font-size: 14px; } .cabecalho { height: 64px; }Não acompanha a preferência de fonte.
Certo: Unidades relativas
body { font-size: 1rem; } .cabecalho { min-height: 4rem; }Cresce com a preferência da pessoa.
Inclua o teste com texto a 200% nos critérios de aceite, priorizando as páginas mais usadas por pessoas idosas. Ampliar o texto é a adaptação mais comum desse público.
Serviço para aposentados
Público majoritariamente idoso.
Errado: Sem teste de ampliação
Situação
Botões se sobrepõem com fonte ampliada.
O público principal tem dificuldade.
Certo: Testado
Situação
Leiaute validado com fonte a 200%.
Funciona para quem precisa.
Amplie o texto para 200%, pelo zoom do navegador e também só pelo tamanho da fonte. Todo o conteúdo e todas as funções precisam continuar disponíveis, sem cortes nem sobreposições.
Formulário com fonte a 200%
Teste de ampliação.
Errado: Sobreposição
Observação
Rótulos passam por cima dos campos.
Não atende.
Certo: Reorganização
Observação
Rótulos e campos se reorganizam em uma coluna.
Atende.
Publique texto como texto, porque em imagem ele fica borrado ao ampliar. Mantenha rótulos e botões concisos.
Aviso importante
Aviso de mudança de horário.
Errado: Aviso em imagem
Publicação
Imagem com o aviso.
Borrado ao ampliar.
Certo: Aviso em texto
Publicação
Bloco de aviso com texto.
Amplia com nitidez.