Design responsivo
O que a norma pede
O conteúdo se adapta a telas estreitas (320 pixels CSS de largura) ou baixas (256 pixels CSS de altura) sem perder informação ou função e sem exigir rolagem nas duas direções, salvo conteúdos que precisam de leiaute bidimensional.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Conteúdo que rola na vertical: funciona com 320 pixels CSS de largura, sem rolagem horizontal.
- Conteúdo que rola na horizontal: funciona com 256 pixels CSS de altura, sem rolagem vertical.
- Exceção: conteúdos que precisam de leiaute bidimensional, como mapas, diagramas, vídeos, jogos, tabelas de dados e interfaces complexas.
- 1.4.10 (AA)
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 cada tela também em 320 px de largura, que equivalem a uma página de 1280 px ampliada em 400%. Transforme colunas em pilhas e evite elementos de largura fixa.
Formulário em 320 px
O formulário tem duas colunas no desktop.
Errado: Largura fixa
No protótipo
Formulário de 800 px fixos em todas as telas.
Com zoom, é preciso rolar para os lados em cada linha.
Certo: Reorganiza
No protótipo
Em telas estreitas, uma coluna só.
Só rolagem vertical.
Use unidades relativas e max-width em vez de larguras fixas, e quebre textos longos, como URLs, com overflow-wrap. Coloque tabelas largas num contêiner com rolagem própria.
Contêiner principal
Largura do conteúdo.
Errado: Largura fixa
.conteudo { width: 960px; }Em 320 px, aparece rolagem horizontal.
Certo: Largura fluida
.conteudo { max-width: 960px; width: 100%; }Adapta-se a qualquer largura.
Inclua o teste em 320 px nos critérios de aceite e revise as páginas antigas de largura fixa. Um leiaute responsivo atende ao mesmo tempo o celular e quem usa ampliação.
Portal antigo
O portal foi feito para 1024 px.
Errado: Mantido
Situação
Rolagem horizontal no celular e com zoom.
Leitura cansativa e erros.
Certo: Adaptado
Situação
Templates refeitos com leiaute fluido.
Funciona em qualquer tela.
Numa janela de 1280 px, aplique zoom de 400%, ou use 320 px nas ferramentas do navegador. Não pode haver rolagem horizontal nem conteúdo ou função perdidos.
Página com zoom de 400%
Teste de reflow.
Errado: Rolagem dupla
Observação
Cada linha de texto exige rolar para a direita.
Não atende.
Certo: Só vertical
Observação
Texto quebra na tela; menu vira botão “Menu”.
Atende.
Prefira links com texto a endereços longos visíveis e evite tabelas com muitas colunas. Conteúdo enxuto se adapta melhor a telas estreitas.
Link para o documento
O texto cita o endereço do documento.
Errado: URL longa
Texto
“Acesse https://www.cidade.gov.br/documentos/editais/2025/edital-completo-versao-final.pdf”
A URL não quebra e força rolagem.
Certo: Texto do link
Texto
“Leia o [edital completo (PDF)].”
Adapta-se à tela.