<aside> <img src="/icons/arrow-southeast_yellow.svg" alt="/icons/arrow-southeast_yellow.svg" width="40px" />

MATERIAIS DE APOIO

Miro - https://miro.com/app/board/uXjVGlzkRAw=/

REGRAS DE ACESSIBILIDADE DIGITAL!!!!!!

Apps de Referência : Smiles, Airbnb

Desing System (mesmo arquivo em versão html e outro em pdf):

design_system_cores.html

design_system_cores.pdf

</aside>

Link dos Mockups e Imagens no DRIVE: https://drive.google.com/drive/u/0/folders/1sakrgRHalrikVkG-mOC25_9zgtd-taAf

Bundle ID: com.mycompany.passaporteacessivelmobile

Acessibilidade (WCAG 2.2 / boas práticas)

Veja este arquivo também (clique aqui): REGRAS DE ACESSIBILIDADE DIGITAL!!!!!!

• 2.5.8 Alvo de toque: altura mínima de 48px nos três controles principais (acima dos 44px citados nas anotações do mockup).
• Seguir tamanho de fonte. O tamanho mínimo é 12 px.
• Rótulos: Semantics na tela, na imagem de fundo, no logo e nos botões; links dos termos com semanticsLabel explícito.
• Gestos: TapGestureRecognizer nos links dos termos com dispose em State para evitar vazamento.
• Evitar texto sobre imagem (ou usar overlay escuro)
• Suportar aumento de fonte do sistema - Não quebrar layout com fonte ampliada
• Todos os elementos com label (leitor de tela)
• Imagens relevantes com descrição (alt text)
• Botões com área mínima de 44x44 px
• Estado de foco visível (inputs e botões) - borda do campo de texto muda cor quando é selecionado (borda fica amarela no modo dark, e borda fica azul escura no modo light). No caso de botões pode ser um efeito mais simples para o usuário sentir que tocou no botão.