Revisão visual: colunas, texto e fotografias em todos os ecrãs
Uma página sem transbordamento pode continuar difícil de ler. Reveja proporções, conteúdos longos e interações antes de publicar alterações.
Seis verificações reproduzíveis
Escolher páginas representativas
Teste início, categoria, artigo, serviço, formulário e tabela. Inclua um título longo, uma língua da direita para a esquerda e várias fotografias.
Comparar colunas
Examine larguras de 320, 390, 768, 1280, 1440 e 1920 px. Verifique alinhamento, ordem de leitura e espaços. Não esconda defeitos com transbordamento oculto.
Ampliar o texto
Teste o texto a 200 % e a reorganização a 320 píxeis CSS. Informação e controlos devem continuar acessíveis; as tabelas podem ter deslocamento próprio.
Verificar fotografias
Reveja recorte, assunto, dimensões e crédito. A fotografia não deve esticar com o texto ao lado. Descreva o que se vê e identifique fotografias de banco de imagens.
Testar interações
Use o teclado em menus, filtros, perguntas e formulários. Verifique foco, erros e conservação dos dados sem enviar uma mensagem real.
Guardar provas
Registe URL, língua, largura, navegador, defeito e resultado após a correção. Complete medições de laboratório com dados reais quando houver tráfego suficiente.
Ficha de revisão
- URL e língua
- Ecrã e zoom
- Defeito e captura
- Correção e resultado da nova verificação
Método de trabalho, não declaração de conformidade. Adapte o âmbito e documente as exceções.
Antes de publicar: seis verificações funcionais
- Percorrer menus, ligações, transferências e mudanças de idioma; verificar o destino real.
- Usar dados fictícios: campos vazios, endereços inválidos, acentos e textos longos.
- Verificar se os erros identificam o campo, funcionam com teclado e preservam os dados úteis.
- Testar também a validação no servidor: as verificações do navegador podem ser contornadas.
- Distinguir confirmação e entrega efetiva; usar um destino de teste autorizado.
- Verificar estados sem JavaScript, recusas e recuperação; excluir segredos das provas.
Situações e verificações adequadas
Em ecrãs pequenos, desloque a tabela horizontalmente. Com o teclado, coloque o foco na tabela e use as setas.
| Situação | O que indica | Verificação útil |
|---|---|---|
| Um comando desaparece com o texto a 200%. | A tarefa deixa de ser acessível após ampliação. | Adaptar o esquema e testar com teclado. |
| Uma foto deforma-se ou deixa um grande espaço no computador. | As proporções desequilibram o conteúdo próximo. | Verificar limites de tamanho e ordem de leitura. |
| overflow: hidden corta uma tabela. | Os dados ficam ocultos. | Dar à tabela deslocamento próprio acessível por teclado e células com quebra de texto. |
| Um título traduzido fica cortado. | Testar uma só língua é insuficiente. | Testar textos longos, línguas RTL e mudança real de língua. |
Exemplo fictício
Uma página fictícia de serviço parece correta a 1.440 píxeis. A 320, o título traduzido longo fica cortado; com texto a 200%, um comando de FAQ torna-se inacessível.
Limitar a foto, permitir reduzir colunas e quebrar texto. Repetir o percurso a 320, 390, 768 e 1.440 píxeis, com ampliação do texto e teclado. Registar defeitos restantes e testar após as correções.
Critérios de validação
- Informação e comandos são legíveis em larguras e línguas representativas.
- A ampliação do texto e o teclado permitem concluir a tarefa.
- Versão, navegador, língua e resultados do novo teste estão registados.
Perguntas práticas
Uma captura chega?
Não. Mostra apenas um estado. Teste também conteúdos longos, teclado e estados abertos, filtrados ou com erros.
Há um tamanho de letra universal?
Não. Avalie legibilidade, comprimento das linhas, zoom e contraste. O tamanho sozinho não garante acessibilidade ou equilíbrio.
Como interpretar os Core Web Vitals?
Os limiares de boa experiência são LCP ≤ 2,5 s, INP ≤ 200 ms e CLS ≤ 0,1 no percentil 75. Medem carregamento, interação e estabilidade, sem substituir a revisão visual.
É necessária uma captura para cada dispositivo possível?
Escolha famílias principais de páginas, tarefas úteis e navegadores com diferenças observadas. Registe os limites: algumas capturas não comprovam todos os dispositivos.
Como priorizar correções visuais?
Resolva primeiro tarefas bloqueadas, dados ocultos e legibilidade. Depois melhore proporções, alinhamento e espaçamento, verificando o funcionamento de outras páginas.