Visões Colidentes

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Garanta que os elementos da interface do usuário na tela não se sobreponham visualmente uns aos outros

Not for use with personal data

Saiba como estamos utilizando inteligência artificial para esta regra!

O que Verificamos

Uma visualização é qualquer elemento visível da interface do usuário na tela, como um rótulo de texto, imagem ou botão. Visualizações que contêm informações não devem intersectar com outra visualização, seja parcialmente ou completamente. Visualizações sobrepostas podem tornar o conteúdo ilegível ou completamente oculto, especialmente quando o Texto Dinâmico aumenta o tamanho do texto.

Esta regra reforça uma prática recomendada pelos Guias de Interface Humana da Apple. Você pode desativar esta regra no Painel de Controle Móvel ou por ignorando a regra em testes escritos para iOS.

Exemplo de Falha ❌

An iOS phone screen showing documentation with enlarged text that overlaps an image. A red focus ring indicates that the top part of the text is difficult to read

Texto ampliado overlaps another element on screen

O texto que se sobrepõe à imagem torna-se parcialmente ou completamente ilegível

Isso pode ocorrer nos tamanhos padrão do texto, ou aparecer apenas após um usuário aumentar o tamanho do Texto Dinâmico nas Configurações

Exemplo Positivo ✅

An iOS phone screen showing documentation with enlarged text that is properly spaced, with no overlapping bounds

Todos os elementos na tela estão spaced so their bounds do not intersect

O texto é legível tanto nos tamanhos padrão quanto em tamanhos maiores de Texto Dinâmico

Restrições de layout adequadas garantem que os elementos mantenham um espaçamento adequado mesmo quando o texto aumenta de tamanho

Resumo

Esta regra tem um impacto menor para os usuários
Visualizações (elementos visíveis da interface do usuário como rótulos de texto e imagens) não devem se sobrepor
O Texto Dinâmico pode aumentar o tamanho do texto em tempo de execução, fazendo com que elementos anteriormente separados colidam

Impacto para os Usuários

Usuários que enxergam são os mais afetados, particularmente aqueles que usam configurações maiores de Texto Dinâmico. Quando visualizações informativas se sobrepõem, o conteúdo pode se tornar parcialmente ou completamente ilegível. Usuários que dependem de tamanhos de texto maiores são mais propensos a encontrar esse problema, mesmo que o layout pareça correto nos tamanhos padrão.

Confirmar Problema de Visualizações Colidindo

Observe os limites de cada visualização informativa na tela.
Uma das seguintes condições se aplica:
- Inacessível: Os limites de uma visão interseccionam com outra visão.
- Acessível: Nenhuma visão informativa possui limites sobrepostos.
Se a tela contiver elementos de texto, aumente o tamanho do Texto Dinâmico nas Configurações e repita a verificação para confirmar que as visualizações não começam a se sobrepor em tamanhos maiores.

Corrigir Problemas

Visualizações colidindo são mais comumente causadas por restrições de layout ausentes ou insuficientes que não consideram o Texto Dinâmico. A correção exata varia de acordo com o layout, mas o objetivo é garantir que elementos informativos sempre tenham espaço suficiente entre eles.

UIKit

Certifique-se de que as restrições entre elementos informativos vizinhos forneçam espaçamento adequado. Se não houver uma restrição entre dois elementos que estão próximos, adicione uma para que eles não possam se sobrepor quando o Texto Dinâmico aumentar seu tamanho.

SwiftUI

Garanta que cada visualização tenha modificadores de layout que impeçam que seus limites se sobreponham aos das visualizações vizinhas. Use HStack e VStack como contêineres pais para permitir que o sistema de layout gerencie o espaçamento automaticamente. Evite usar ZStack como pai para visualizações que contêm texto, pois ele sobrepõe elementos uns sobre os outros.

React Native

Assegure-se de que visualizações contendo texto ou outros conteúdos escaláveis não tenham um maxHeight definido, o que pode fazer com que o conteúdo seja cortado ou empurrado para dentro de elementos adjacentes à medida que o tamanho do texto aumenta. Ao usar layout flexível, considere adicionar um valor para a propriedade gap para manter um espaçamento consistente entre os elementos.

Posso Ignorar Esta Regra?

Visualizações Colidindo têm um impacto menor para os usuários e reforçam uma prática recomendada da Apple em vez de um requisito rígido do WCAG. Você pode desativar completamente esta regra no Painel de Controle Móvel, ou ignorar achados individuais em seus testes iOS. Saiba mais sobre ignorando regras.