Pular para o conteúdo principal

Status: Approved · v3 · SPEC-UX-A11Y-001

depends_on: SPEC-UX-TOKENS-001, SPEC-UX-VISUAL-001

used_by: IS-MVP-15.3, IS-MVP-19.2

Responsividade e acessibilidade

Princípio​

Web e mobile compartilham linguagem, dados e componentes quando adequado, mas não compartilham cegamente a mesma composição. A informação essencial e as ações devem permanecer equivalentes em qualquer viewport.

Breakpoints conceituais​

  • Compact: 320–599 px.
  • Medium: 600–1023 px.
  • Wide: 1024–1439 px.
  • Extra wide: 1440+ com conteúdo limitado por max width.

Breakpoints são tokens/adapters; telas decidem mudança de layout por necessidade, não por device name.

Regras de adaptação​

  • Duas colunas públicas viram ordem narrativa única no compact.
  • Sidebar de gestão vira menu/context switcher; não desaparece.
  • Tabelas densas viram listas ou scroll horizontal acessível apenas quando preservar colunas for essencial.
  • Ações primárias permanecem visíveis; ações secundárias podem ir para menu rotulado.
  • Modal complexo vira página/sheet em mobile.
  • Hero reduz altura, nunca corta nome/status/actions.
  • Componentes dentro de colunas medem a própria largura; viewport global não decide layout interno.
  • ActionCluster não deixa ação órfã, preserva labels em nowrap e usa accessible name no modo ícone.
  • Tabs mobile são sublinhadas, scrolláveis e removidas quando o conteúdo correspondente não existe.
  • Nome/sigla de time nunca usa ellipsis; colunas menos prioritárias cedem antes da sigla inteira.
  • Galeria preserva 4:3/cover, quantidade par e +N navegável.

Acessibilidade​

  • Touch targets 44×44 ou maiores.
  • Headings sem saltos arbitrários.
  • Labels persistentes em forms.
  • Focus visível, ordem lógica e escape/return em modals.
  • Ícone sem texto recebe accessible label.
  • Imagens informativas têm alt; decorativas são ignoradas.
  • Status usa texto/ícone/cor.
  • Erro de formulário é anunciado e associado ao campo.
  • Reduced motion e aumento de fonte são respeitados.
  • Contraste revisado em Raiz/Neutro × dark/light e nas identities de times.
  • Texto e ícone sobre ação/seleção primária usam on-primary; não derivam contraste por componente.
  • Bootstrap de tema não pode produzir flash; skeleton neutro não anuncia tema incorreto.
  • Embed externo tem título, consentimento quando aplicável, foco, sandbox/CSP, fallback e link externo.

Conteúdo e linguagem​

Não truncar informação crítica. Nomes longos podem ocupar duas linhas; placar e status não podem ser escondidos. Microcopy deve explicar consequência de ações críticas. Valores monetários têm formatação local e nunca dependem de cor.

Matriz de teste​

  • mobile pequeno 360×800;
  • mobile grande 390/430;
  • tablet portrait/landscape;
  • desktop 1280 e 1440;
  • teclado-only web;
  • screen reader smoke nas jornadas P0;
  • zoom 200% web;
  • dynamic font mobile quando suportado;
  • quatro modos, migração da preferência legada e alto contraste quando aplicável.

Critérios de aceite​

Nenhum fluxo P0 perde função em compact; nenhuma action depende de hover; focus e errors são percebidos; conteúdo permanece legível com fonte aumentada; tabelas/menus possuem alternativa funcional; testes de acessibilidade são parte do hardening.