# ADR-010 — Web moderna: semântica, acessibilidade, CSS moderno, PWA e mínimo JS

| Campo | Valor |
|---|---|
| **Status** | Aceito (2026-10-20) |
| **Data** | 2026-10-14 |
| **Plano de origem** | `wiki/plan/01-analise-e-decisoes.md` |
| **Relacionadas** | ADR-009, ADR-025 |

## Contexto

O legado espalhava JS, dependia de CDN e de bibliotecas pesadas. O público é cidadão comum, em
dispositivos e redes variados, e o portal precisa ser **semântico, acessível e rápido**. A web
moderna já resolve muito com HTML/CSS nativos.

## Decisão

1. **HTML semântico primeiro:** landmarks, um `h1` por página, elementos nativos (`<dialog>`,
   `<details>`, popover) antes de JS; ARIA só quando necessário (ARIA APG).
2. **Mínimo JS / progressive enhancement:** HTML+CSS resolvem navegação, tema, filtros e estados;
   JS só onde não dá. Sem jQuery, sem SPA. Scripts `defer`. Conteúdo público funciona **sem JS**.
3. **Acessibilidade moderna (eMAG 3.1 + WCAG 2.2 AA):** `:focus-visible`, alvo mínimo ≥24×24px
   (casa: ≥44px em toque), `prefers-*`/`forced-colors`, `inert`, `<dialog>` nativo, roving
   tabindex, live regions; critérios novos da WCAG 2.2.
4. **CSS moderno:** Tailwind 4 + daisyUI; `oklch()` com fallback; Grid/Subgrid; container queries;
   `clamp()` (min/max em `rem`); `dvh`/`svh`, `cqi`/`cqw`; `@layer` (com `a11y` por último) e
   `@property`; propriedades lógicas. Sem `!important`/estilo inline.
5. **Responsividade real:** mobile-first desde ~320px; imagens responsivas; texto a 200% sem perda
   (WCAG 1.4.4).
6. **PWA:** manifest + service worker (offline mínimo) + instalabilidade, como *progressive
   enhancement*.
7. **Alinhamento contínuo:** baseline de browsers, `@supports`, **sem CDN** (vendorizado), auditoria
   no CI.

## Justificativa (alternativas descartadas)

- **SPA/framework JS pesado** — descartada: pior a11y/performance e mais dependências.
- **CDN** — descartada: privacidade, disponibilidade e vendorização.
- **`!important`/guerras de especificidade** — descartada: `@layer` resolve.

## Consequências

**Positivas**
- Páginas rápidas, acessíveis e resilientes (funcionam sem JS).
- CSS previsível (camadas) e responsivo por container.

**Custos / negativas**
- Recursos modernos exigem baseline/`@supports`.
- Interações ricas exigem JS próprio (mínimo, vendorizado).

## Exemplo mínimo (comparativo)

```html
<!-- ❌ div-itis + JS para tudo -->
<div onclick="go()" class="btn"><div>Enviar</div></div>

<!-- ✅ semântico, nativo, sem JS -->
<button type="submit" class="btn btn-primary">Enviar</button>
<dialog open>…</dialog>
```
```css
/* ❌ fonte fluida só com vw (quebra zoom) */
h1 { font-size: 4vw; }
/* ✅ clamp com rem */
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }
```

## Verificação

- Gate do plano 11 (axe + eMAG + sniffCSS) e e2e com `javaScriptEnabled: false`.
- `tools/vendor-check` (zero CDN).

## Referências

- `wiki/plan/09-design-system-daisyui.md`, `wiki/plan/10-layout-engine-slots.md`, `wiki/plan/11-acessibilidade-ux-gate.md`.