Acessibilidade Mobile — Acessibilidade na Web

Tamanho dos Alvos de Toque

Padrões e recomendações

WCAG 2.5.8 (AA): mínimo 24×24 CSS px
WCAG 2.5.5 (AAA): mínimo 44×44 CSS px
Apple Human Interface Guidelines: 44×44 pt
Google Material Design: 48×48 dp
Espaçamento entre alvos adjacentes: ≥ 8px

Exceções WCAG 2.5.8: links inline em texto corrido, elementos com espaçamento compensatório ao redor, elementos essencialmente menores (como pin em mapa).

Aplicando em CSS

/* Garantir tamanho mínimo */
.btn-touch {
  min-width: 44px;
  min-height: 44px;
  padding: 0.75rem 1rem;
}

/* Expandir área clicável sem
   alterar o layout */
.icon-btn {
  position: relative;
  width: 24px;
  height: 24px;
}
.icon-btn::after {
  content: '';
  position: absolute;
  inset: -10px; /* expande 10px em torno */
}

Zoom e Reflow

Regras WCAG

WCAG 1.4.4 (AA): texto deve poder ser redimensionado até 200% sem perda de conteúdo ou funcionalidade
WCAG 1.4.10 (AA): conteúdo deve funcionar com zoom de 400% em viewport de 320px de largura sem rolagem horizontal
Nunca bloqueie o zoom do usuário

Proibido:

<meta name="viewport"
  content="width=device-width,
  user-scalable=no">

<meta name="viewport"
  content="width=device-width,
  maximum-scale=1">

Boas práticas de CSS responsivo

/* Use unidades relativas */
body { font-size: 1rem; }       /* ✓ */
body { font-size: 16px; }       /* ⚠ fixo */

.container { max-width: 80ch; } /* ✓ */
.container { max-width: 960px; }/* ✓ com media */

/* Evite overflow horizontal */
img, video, iframe {
  max-width: 100%;
}

/* Colunas que se adaptam */
.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));
}

Gestos e Orientação

WCAG 1.3.4 — Orientação

Não bloqueie a orientação da tela (portrait/landscape) a não ser que a orientação seja essencial para a funcionalidade (ex: piano virtual, jogo específico).

/* Proibido bloquear via CSS: */
@media (orientation: landscape) {
  body { display: none; } /* ❌ */
}

WCAG 2.5.1 — Gestos com múltiplos pontos

Toda funcionalidade que usa gestos com múltiplos pontos (pinch-to-zoom, swipe com 2 dedos) ou gestos baseados em trajetória deve ter uma alternativa de toque simples.

WCAG 2.5.4 — Atuação por Movimento

Funcionalidades ativadas por movimento do dispositivo (agitar para desfazer, inclinar para navegar) devem ter alternativa de interface e o usuário deve poder desativar a resposta ao movimento.

WCAG 2.5.2 — Cancelamento de Ponteiro

Para ações ativadas por toque único: use o evento pointerup (não pointerdown), ou permita que o usuário cancele movendo o dedo para fora do alvo antes de soltar.

Teclado Virtual

Tipos de input para o teclado certo

<!-- Teclado numérico com telefone -->
<input type="tel"
  autocomplete="tel">

<!-- Teclado com @ para e-mail -->
<input type="email"
  autocomplete="email">

<!-- Teclado numérico -->
<input type="number" min="0">

<!-- inputmode: mais controle -->
<input inputmode="numeric"
  pattern="[0-9]*">

<input inputmode="decimal">
<input inputmode="search">
<input inputmode="url">

autocomplete para preenchimento rápido

<!-- Dados pessoais (WCAG 1.3.5) -->
<input autocomplete="name">
<input autocomplete="given-name">
<input autocomplete="family-name">
<input autocomplete="email">
<input autocomplete="tel">

<!-- Endereço -->
<input autocomplete="street-address">
<input autocomplete="postal-code">
<input autocomplete="country">

<!-- Pagamento -->
<input autocomplete="cc-number">
<input autocomplete="cc-exp">

Respeite as Preferências do Usuário

Sistemas operacionais expõem as preferências do usuário via media queries. Respeitá-las é uma das formas mais importantes de acessibilidade.

/* Modo escuro automático */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --text: #f5f5f5;
  }
}

/* Reduzir animações (epilepsia,
   vertigem, sobrecarga cognitiva) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Alto contraste */
@media (prefers-contrast: high) {
  :root {
    --bg: #000;
    --text: #fff;
    --border: #fff;
  }
}

/* Transparência reduzida */
@media (prefers-reduced-transparency: reduce) {
  .glassmorphism {
    background: var(--bg-solid);
    backdrop-filter: none;
  }
}

prefers-reduced-motion

Afeta usuários com epilepsia fotossensível, transtorno vestibular, TDAH e outros. Desative ou reduza animações, transições e scroll suave.

prefers-color-scheme

~82% dos usuários usam modo escuro no mobile. Implementar é acessibilidade e preferência do usuário.

forced-colors (Windows High Contrast)

No modo de alto contraste do Windows, o sistema substitui cores. Teste seu site com este modo ativo.

@media (forced-colors: active) {
  .custom-focus {
    outline: 3px solid ButtonText;
  }
}