Capturas de tela acessíveis no App Store: contraste, tamanho de texto, alt text
As capturas de tela do App Store não são navegáveis por leitores de tela da mesma forma que uma página web — a Apple não expõe o alt text das capturas diretamente ao usuário. Mas as regras de acessibilidade visual (contraste, tamanho de texto, independência de cor) se aplicam com toda a força, e coincidem com as mesmas regras que governam a legibilidade em tamanho de miniatura. Vale a pena seguir ambas porque é o mesmo trabalho.
Contraste: WCAG AA como linha de base
Proporções de contraste WCAG AA:
- Texto normal: mínimo de 4,5:1 contra o fundo.
- Texto grande (24pt+ regular ou 18pt+ negrito): mínimo de 3:1.
- Elementos gráficos / controles de interface: 3:1.
Use um verificador de contraste — há muitos gratuitos — em cada legenda sobre o fundo do painel em que ela está. Se o fundo for um gradiente, verifique nos pontos mais escuro e mais claro do gradiente onde a legenda se encontra.
Falha comum: texto branco sobre um gradiente de laranja claro a laranja escuro. Onde a legenda fica sobre o laranja claro, o contraste cai abaixo de 4,5:1 e o texto desaparece no tamanho de miniatura.
Tamanho de texto em miniaturas
As capturas de tela do App Store são exibidas em vários tamanhos:
- Tamanho completo na página do produto (~1.290 px de largura).
- Visualização no resultado de busca (~600 px de largura).
- Miniatura no resultado de busca (~300 px de largura).
Se a sua legenda tem 60 px no arquivo de design em 1.290 × 2.796, ela é exibida com ~14 px em uma miniatura de busca de 300 px. 14 px está abaixo do tamanho mínimo recomendado para legibilidade. A solução: projete legendas com 80-100 px para que sejam exibidas com 18-22 px nas miniaturas. Especialmente para os painéis 1-3, que são os que aparecem na busca.
Independência de cor
Não dependa apenas da cor para comunicar informações. A violação mais comum: texto de legenda em uma cor que se distingue do fundo apenas pelo matiz (texto vermelho sobre fundo verde, por exemplo). Qualquer pessoa com daltonismo vermelho-verde enxerga uma mancha indistinta.
Teste: se você converter sua captura de tela para escala de cinza, ainda consegue ler cada legenda? Se sim, você tem independência de cor. Se não, aumente a diferença de luminância (brilho), não apenas a diferença de matiz.
Alt text no App Store Connect
O App Store Connect não expõe o alt text das capturas da mesma forma que uma página web expõe atributos alt. Mas o App Store Connect tem um campo de "tags de acessibilidade" por captura, usado por usuários do VoiceOver ao navegar no App Store. Preencha-o. Descrição breve do que a captura mostra: "Tela inicial com resumo de gastos mensais" em vez de "Captura 1".
Essa é a maior vitória de acessibilidade porque quase nenhum desenvolvedor faz isso. Usuários do VoiceOver ao navegar no App Store atualmente ouvem "captura 1, captura 2" na grande maioria dos apps. Algumas frases de descrição por painel tornam sua listagem muito mais utilizável para esse público.
O antipadrão da "fonte pequena e decorativa"
Fontes decorativas (scripts de caligrafia, fontes display ultrafinas) quase sempre reprovam nos testes de acessibilidade e de miniatura ao mesmo tempo. Os traços finos que parecem elegantes no tamanho completo tornam-se ilegíveis em 300 px e impossíveis de ler para usuários com baixa visão.
Use esses estilos decorativos para no máximo uma palavra de destaque por carrossel. Legendas do corpo e qualquer texto importante precisam de uma fonte com espessura de traço consistente nos tamanhos que importam — a maioria dos sans-serif grotescos modernos (Inter, SF Pro, Roboto) funciona.
Posição das legendas e áreas seguras
A Apple às vezes sobrepõe elementos de interface ao carrossel do App Store (o botão "Obter", o chip de classificação etária, o botão "Abrir" após a instalação). Se sua legenda estiver nessas áreas, ela será encoberta. Mantenha as legendas na zona segura: 60 px de cada lado, 80 px do topo, 200 px livres na parte inferior para a interface do App Store.
O que testar antes de publicar
- Passe cada legenda por um verificador de contraste contra o fundo do painel.
- Visualize suas capturas de tela com 300 px de largura em um simulador de miniatura (ou apenas redimensione no Figma). Cada legenda ainda deve ser legível.
- Teste em escala de cinza para verificar independência de cor.
- Escreva tags de acessibilidade para cada painel no App Store Connect.
- Se você tiver um usuário do VoiceOver no seu grupo de testes, peça que ele navegue pela sua listagem e reporte o resultado.
Por que isso importa além da acessibilidade
As regras de contraste e tamanho que o WCAG codifica derivam de pesquisas sobre visão humana. Não são arbitrárias — são os limiares abaixo dos quais uma parcela significativa dos usuários não consegue ler texto com conforto. Projetar para AA significa projetar para uma população que inclui usuários mais velhos, usuários em telas externas e iluminadas, usuários com problemas visuais leves não corrigidos, além de todos que navegam rapidamente pela busca.
As mesmas regras que ajudam usuários com baixa visão a ler sua captura de tela também ajudam usuários que navegam no App Store em um dia de sol no ônibus. Mesmo problema; mesma solução.