```
Il `role="alert"` oppure un `aria-live="polite"` assicura che gli screen reader annuncino il messaggio quando compare. Effetto sulla conversione: gli utenti capiscono più in fretta dove il modulo li respinge, con meno tentativi di invio alla cieca e meno abbandoni per frustrazione.
### Correzione 3: ordine di focus e un anello di focus visibile
Le WCAG 2.2 (2.4.3 Focus Order, 2.4.7 Focus Visible, 1.4.11 Non-text Contrast) richiedono un indicatore di focus visibile con un contrasto di almeno 3:1 rispetto allo sfondo circostante. Un anti-pattern comune nelle librerie di componenti: `outline: none` viene impostato per nascondere l'anello predefinito, senza aggiungere un sostituto.
```
.field input:focus-visible,
.field button:focus-visible {
outline: 3px solid #4313d3;
outline-offset: 2px;
border-radius: 4px;
}
```
Usare `:focus-visible` invece di `:focus` assicura che l'anello appaia solo con il focus da tastiera, non al clic del mouse. L'ordine di focus deve anche seguire l'ordine visivo, quindi nessun salto nascosto tramite `tabindex`. Effetto sulla conversione: gli utenti da tastiera e i comandi vocali si muovono senza intoppi nel flusso, e l'anello visibile aiuta anche gli utenti vedenti in contesti difficili (mobile, sole intenso).
### Correzione 4: tipi di input corretti e token autocomplete
Le WCAG 2.2 (1.3.5 Identify Input Purpose) richiedono che lo scopo di un campo sia rilevabile in modo programmatico. Questa è la leva diretta per autofill, password manager e screen reader. In pratica, ogni campo standard di checkout ha un token `autocomplete` documentato.
```