Layout mobile, PWA, checklist WCAG

Selo de estado: Preview (teto atual do produto) · Curso ACD-330 — Dashboards: visuais, filtros, interações e design · Aula 11 de 12 · Atualizado em 2026-10-04.

Objetivo#

Ao final desta aula você vai preparar layout mobile; passar no checklist.

Vídeo#

Identificador: acd-330-11-mobile-pwa-acessibilidade · Duração-alvo: 6 min · Tela: /dashboards.

Roteiro (capítulos):

1. 0:00–1:30 — layout mobile dedicado (/dashboards/[id]) — breakpoint 640px e auto-empilhamento.
2. 1:30–3:00 — instalar como app (PWA) — tela inicial, tela cheia, service worker.
3. 3:00–4:00 — push, deep links e cache seguro — o que o app nunca guarda no aparelho.
4. 4:00–5:00 — checklist WCAG AA (/dashboards/[id]) — o que é automatizado, o que é gate humano.
5. 5:00–6:00 — publicar sabendo o que é Preview — layout mobile GA-candidato, PWA e a11y em Preview.

Conteúdo#

Três camadas, três maturidades diferentes

"Celular" nesta aula significa três coisas distintas, e cada uma tem um teto de maturidade próprio: o layout mobile (como os visuais se reorganizam numa tela pequena — GA-candidato), o PWA (instalar, receber push, abrir deep link — Preview) e a acessibilidade WCAG AA (o painel funciona para quem usa teclado ou leitor de tela — Preview, com parte do checklist dependendo de validação humana). Tratar as três como uma coisa só esconde onde o produto já é sólido e onde ainda precisa de cautela antes de prometer algo ao cliente.

Como aparece no produto

O layout mobile é um layout.mobile separado do layout de tela grande, com breakpoint em 640px. Se você não definir posições específicas para o celular, o painel auto-empilha os visuais na ordem em que aparecem na tela grande — funciona na maioria dos casos, mas painéis densos (muitos visuais pequenos lado a lado) ganham com um layout mobile definido à mão, onde você escolhe o que fica em cima. Uma guarda de validação confere o layout mobile antes de publicar.

O PWA é a forma do ingestia.bi de virar "um app" sem app nativo: não existe loja (App Store/Play Store) — em vez disso, o navegador instala o site na tela inicial (Safari no iOS ≥ 16.4: Compartilhar → "Adicionar à Tela de Início"; Chrome no Android: menu → "Instalar app"), e ele abre em tela cheia, sem barra de endereço. Um service worker decide o que vem da rede e o que fica em cache local — e essa decisão segue uma regra rígida de segurança: o shell estático (ícones, assets versionados, manifest) pode ficar em cache; HTML de rota e qualquer chamada de dado (/api/**, dados do painel) nunca fica em cache — tenta a rede sempre, e offline mostra uma tela genérica, sem número nenhum. É proposital: um cache "burro" para dado financeiro não vaza nada entre sessões ou usuários no mesmo aparelho.

Notificações push dependem de chaves VAPID configuradas no ambiente — sem a chave pública, o app simplesmente não assina push (degrada em silêncio, nunca finge que assinou), e você ainda precisa conceder permissão de notificação. Deep links abrem o app já no painel certo (e no recorte certo, quando aplicável), em vez de cair na home — útil para colar num aviso.

O checklist WCAG AA cobre o que a lógica automatizada consegue garantir: contraste de cor (ver aula 9), navegação por teclado, foco visível, rótulos para leitor de tela. A parte automatizada (axe, cobertura de regra) está zerada de violações conhecidas; a parte que exige pessoa testando com NVDA/VoiceOver + teclado é um gate humano ainda não exercido em produção — por isso o selo da aula fica em Preview nessa frente, mesmo com a cobertura automatizada limpa.

Exemplo na Aurora Varejo

Na página "Resumo" do painel "Comercial — Aurora", defina o layout mobile com os 3 KPIs empilhados no topo, seguidos do mapa e por último a linha mensal — a ordem que faz sentido ler de cima para baixo num celular. Instale o painel como PWA no celular de teste (Safari/Chrome), confirme a abertura em tela cheia e, se houver VAPID configurado no ambiente, teste um alerta chegando como notificação push.

Erros comuns de design

• Testar só em tela grande. Um painel aprovado só no desktop pode empilhar mal no celular — sempre confira o layout mobile antes de publicar, mesmo confiando no auto-empilhamento.
• Prometer uso offline dos números. O app nunca guarda dado do painel — "funciona offline" é verdade só para o casco (ícones/estilo), nunca para os valores.
• Esperar push sem VAPID configurado. Sem a chave pública no ambiente, push simplesmente não assina — não é um bug do painel específico, é configuração de ambiente ausente.
• Achar que "zero erro no axe" é acessibilidade completa. A varredura automatizada cobre uma parte real, mas não substitui teclado + leitor de tela testados por uma pessoa — trate o checklist como parcialmente verificado, não como certificado.
• Cor como único sinal em tela pequena. Em mobile o espaço é curto; a tentação de cortar o ícone de uma regra de formatação condicional (aula 9) para "economizar espaço" piora a acessibilidade justamente no dispositivo com tela menor.

Estado atual (Preview)

Layout mobile dedicado é GA-candidato na lógica (auto-empilhamento, guarda de validação cobertos por suíte determinística) — mas o render em dispositivo real é NÃO MEDIDO. PWA, instalação, push, deep links e cache seguro (C14.1) são Preview: a lógica do que o cache pode tocar e de quando o push pode assinar é testada, mas o funcionamento em dispositivo real (iOS ≥ 16.4/Android, chaves VAPID em produção) é uma etapa de homologação manual ainda não cumprida. Acessibilidade WCAG AA (C03.6) também é Preview: automatizado zerado, mas NVDA/VoiceOver + teclado humano é gate ainda pendente.

Faça você mesmo#

No workspace de treino Aurora Varejo (abra /dashboards no console):

1. Abra a página "Resumo" do painel "Comercial — Aurora" e ative a visualização do layout mobile.
2. Defina a ordem de empilhamento: KPIs no topo, mapa em seguida, linha mensal por último.
3. Redimensione a janela para menos de 640px (ou abra num celular) e confirme o empilhamento.
4. No celular, instale o painel como app pela tela inicial (Safari ou Chrome).
5. Abra o app pelo ícone instalado e confirme a tela cheia, sem barra de endereço.
6. Navegue pelo painel só com o teclado (Tab/Enter) e confirme que o foco fica visível em cada controle.
7. Liste, no checklist WCAG, quais itens você conseguiu validar manualmente e quais ficaram pendentes.

Você terminou quando: o layout mobile da página "Resumo" está definido e testado em tela estreita, o app está instalado no celular de teste, e você navegou o painel inteiro só com teclado.

Checagem rápida#

Três perguntas no final da aula, corrigidas no servidor. A aula só conta como concluída depois da checagem.

Documentação relacionada#

• bi/app-movel-pwa
• bi/editor-canvas-paginas-temas

Capacidades ensinadas#

C14.1 · C03.6 — o selo exibido na aula é sempre o estado mais conservador entre as capacidades citadas; nada aqui é "GA".