Clerkcode02/responsivo-acessibilidade

Responsivo & Acessibilidade

Uma página relacionada a emergências deve ser utilizável por todos, em qualquer dispositivo, sob estresse. Clareza supera criatividade.

Breakpoints

Padrões do Tailwind: sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Projete mobile-first e intencionalmente por faixa:

• 320–639: coluna única, telefones planos, galeria horizontal com scroll-snap, CTAs empilhados em largura total, menu em painel de revelação.
• 640–1023: grid de duas colunas onde o conteúdo permitir; ainda sem inclinação 3D ou fixação.
• ≥ 1024: layouts assimétricos de 12 colunas, telefones 2.5D, inclinação por ponteiro, storytelling fixo opcional. Teste larguras: 320, 375, 414, 768, 1024, 1280, 1440, 1920. Sem rolagem horizontal da página em qualquer largura (cuidado com telefones rotacionados e texto muito grande — use overflow-x: clip nas seções, não no body).

Marcos & estrutura

• <a href="#main" class="skip-link">Pular para o conteúdo</a> primeiro elemento focável.
• <header> (nav), <main id="main">, cada seção como <section aria-labelledby="…-heading">, <footer>.
• Exatamente um h1 (manchete herói). Cada seção começa com h2; subitens como h3. Nenhum nível pulado.
• ids de seção correspondem às âncoras de navegação: sobre, recursos (categorias + vitrine), como-funciona, registrar, faq.
• Alvos de âncora com deslocamento devido à navegação fixa: scroll-margin-top: var(--nav-h).

Navegação

• Desktop: links inline + um CTA informativo (ex.: "Explore os Recursos") — sem CTA de download/instalação, veja CLAUDE.md "Escopo: vitrine, não funil de instalação".
• Mobile: um <button aria-expanded aria-controls="mobile-menu"> alterna um painel. Ao abrir: focar no primeiro link; Esc fecha e retorna o foco ao botão; clicar em um link fecha o menu. O bloqueio de rolagem do corpo é opcional e deve ser liberado de forma confiável. O botão hambúrguer tem nome acessível "Abrir menu"/"Fechar menu".
• Indicação de seção atual (opcional) via aria-current="true", não apenas por cor.

Teclado & foco

• Tudo que é interativo deve ser acessível por Tab na ordem visual. Sem tabindex positivo.
• Anel de foco visível em todos os controles: outline: 2px solid var(--color-accent); outline-offset: 3px; — garanta ≥ 3:1 contra fundos escuros e claros (use anel claro em botões vermelhos).
• Galerias horizontais: container tabindex="0" com role="region" + aria-label, teclas de seta rolam nativamente.
• Qualquer controle desabilitado/indisponível (ex.: link de contato/legal ausente): renderizado como <span aria-disabled="true"> ou <button disabled> com texto explicativo, nunca um link falso focável.

Acordeões de FAQ

• Prefira <details><summary> nativo; ou button[aria-expanded][aria-controls] + região. O texto do resumo é a pergunta como texto simples dentro de um h3 equivalente.
• O conteúdo está no DOM (pesquisável, funciona sem JS).

Toque & ponteiro

• Alvos de toque ≥ 44×44px (botões, itens de menu, alternadores de FAQ).
• Espaçamento ≥ 8px entre alvos adjacentes.
• Efeitos apenas no hover nunca escondem informações.

Cor & texto

• Contraste do texto do corpo ≥ 4.5:1, texto grande ≥ 3:1, limites da interface ≥ 3:1.
• Status (Pendente/Em andamento/Limpo) sempre tem rótulo de texto + ícone, não apenas cor.
• Texto redimensiona até 200% sem perda; sem containers de texto com altura fixa.
• Comprimento da linha ≤ ~70 caracteres para o corpo.

Imagens & mídia

• Capturas de tela significativas: alt factual (veja vitrine-de-capturas-aplicativo). Decorativas: alt="" + aria-hidden em SVG puramente decorativo.
• Placeholders se anunciam: "Placeholder de captura de tela: tela de registro".
• Ícones que acompanham texto: aria-hidden="true".

Movimento

• Respeite prefers-reduced-motion (veja movimento-leve). Nenhum conteúdo aparece apenas por animação.
• Componentes animados ilustrativos (rastreamento, coordenação) incluem texto visível dizendo que são ilustrações, além de aria-live NÃO ser usado (não são dados ao vivo).

Informações de emergência

• Aviso aparece perto dos CTAs do herói, no FAQ ("O SOS substitui as linhas de emergência?"), perto do CTA final e no rodapé. Linguagem simples, contraste legível, não escondido em texto minúsculo (≥ 14px).

Checklist de revisão

• axe / Lighthouse a11y ≥ 95, zero violações críticas
• Somente teclado: link de pular, abrir/fechar/Esc do menu, todas as âncoras, FAQ, galeria
• Verificação pontual com leitor de tela (VoiceOver/NVDA): lista de títulos faz sentido
• 320px: sem estouro, manchete cabe, CTAs proeminentes
• Zoom de 200% funciona
• Movimento reduzido verificado
• Mobile paisagem (ex.: 740×360) utilizável