5.1.2.16 - Requisitos para ampliação da tela
Descrição
Deve haver suporte para ampliação da tela sem perda de informação ou funcionalidade. Quando o usuário fizer ampliação da tela (zoom) em uma aplicação, ele não pode perder informação ou funcionalidade, como, por exemplo, elementos que ficam escondidos atrás de outros elementos de interface visuais.
Exemplo
Quando o usuário amplia a tela, os elementos da aplicação se reorganizam para se adaptar ao novo tamanho de tela.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Projete a interface para que os elementos e o layout mantenham sua integridade quando a tela for ampliada. Isso inclui evitar sobreposição de elementos e garantir que a ampliação não esconda informações ou funcionalidades, proporcionando uma experiência acessível e completa ao usuário.
Projete para o zoom
Em 200%, o layout se reorganiza sem esconder nem sobrepor nada.
Certo: Layout que reflui
anotação de especificação
Em 200%: colunas viram uma só e o menu vira botão Menu.
Errado: Layout fixo
anotação de especificação
Em 200%: o botão Pagar fica atrás do rodapé fixo.
Implemente o código de forma responsiva, permitindo que o usuário aumente o zoom sem que elementos fiquem ocultos ou sobrepostos. Teste a aplicação em diferentes níveis de ampliação para garantir que todas as funcionalidades e informações estejam acessíveis.
Unidades relativas e zoom liberado
Nunca bloqueie o zoom e evite alturas fixas em texto.
Certo: Zoom permitido
<meta name="viewport" content="width=device-width, initial-scale=1"> .card { padding: 1rem; }A pessoa amplia e o layout se ajusta.
Errado: Zoom bloqueado
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no"> .card { height: 120px; }Sem zoom e texto cortado ao ampliar.
Aprenda a fazer com conteúdos selecionados para você
Garanta que a equipe projete e desenvolva a aplicação com suporte para ampliação de tela, sem perda de informações ou funcionalidades, assegurando uma experiência inclusiva e de alta qualidade, mesmo para usuários que dependem de zoom para melhor visualização.
Inclua o zoom de 200% nos testes
Todas as telas devem ser testadas ampliadas antes da entrega.
Checklist do requisito 5.1.2.16: zoom de 200%
- sem perda
Tela inicial
tela
- sem perda
Carrinho
tela
- pendente
Pagamento
tela
2 de 3 telas em conformidade, 1 pendente de revisão.
Verificar suporte a zoom
Certifique-se de que a aplicação suporta a ampliação de tela de até 200% sem perda de funcionalidade ou informação, como recomendado pelo WCAG 2.1.
Testar em diferentes dispositivos e navegadores
Realize testes de ampliação em dispositivos móveis e desktops, bem como em diversos navegadores, para garantir que a interface se adapta corretamente em todos os ambientes.
Verificar a responsividade do layout
Confirme que o layout da aplicação é responsivo e ajusta-se corretamente quando o usuário aumenta o zoom, sem que elementos se sobreponham, fiquem escondidos ou se tornem inacessíveis.
Garantir legibilidade de texto
Verifique se o texto e os elementos interativos permanecem legíveis e acessíveis com a ampliação. Certifique-se de que fontes, botões e campos de entrada mantenham tamanhos adequados e distâncias corretas.
Evitar uso de valores fixos para elementos
No desenvolvimento, utilize unidades relativas (como em, %, rem) para tamanhos de fonte, margens e espaçamentos, em vez de unidades fixas (como px), para melhor adaptação ao zoom.
Testar funcionalidades com ampliação
Realize testes funcionais, como preenchimento de formulários, navegação por menus e interação com botões, em diferentes níveis de ampliação para garantir que nenhuma funcionalidade seja comprometida.
Verificar elementos visuais
Certifique-se de que elementos gráficos, como ícones e imagens, sejam redimensionados corretamente e não fiquem distorcidos ou percam detalhes importantes com a ampliação.
Avaliar a navegação
Garanta que a navegação da aplicação ainda seja clara e intuitiva, mesmo quando a tela está ampliada. O usuário deve poder se deslocar facilmente pelo conteúdo sem a necessidade de rolagem excessiva.
Incluir testes com tecnologia assistiva
Verifique se a ampliação da tela é suportada por tecnologias assistivas, como leitores de tela e lupas eletrônicas, para assegurar que o conteúdo é acessível.
Corrigir sobreposição de elementos
Inspecione áreas onde elementos possam se sobrepor quando a tela é ampliada, ajustando o design e a estrutura de layout para que todas as partes da aplicação permaneçam utilizáveis.
Amplie para 200% e use a tela
Com zoom, preencha formulários, abra menus e acione botões.
Certo: Tudo alcançável
Zoom 200% → conteúdo em uma coluna
Menu acessível pelo botão Menu
Botão Pagar visível
Nenhuma função se perde.
Errado: Conteúdo perdido
Zoom bloqueado pelo app
Texto cortado nos cards
Botão Pagar coberto pelo rodapé
A pessoa não conclui a compra.
Organize o conteúdo de modo que ele seja claro e legível em qualquer nível de zoom. Evite excesso de informações em áreas limitadas da interface para prevenir problemas de sobreposição em ampliações.
Evite textos que só cabem num tamanho
Textos curtos e sem quebras forçadas se adaptam melhor ao zoom.
Certo: Texto flexível
texto do botão
"Pagar"
Cabe em qualquer ampliação.
Errado: Texto rígido
texto do botão
"Clique aqui para prosseguir para o pagamento do pedido"
Vai cortar ou sobrepor ao ampliar.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.