Operabilità da tastiera

Definizione — L’operabilità da tastiera garantisce che ogni funzione di una pagina o applicazione sia raggiungibile e attivabile senza mouse, usando i comandi standard (Tab/Shift+Tab per muovere il focus, Enter/Space per attivare, frecce per spostarsi in controlli composti). È richiesta da WCAG 2.1.1 Keyboard (A) e si collega a 2.4.3 Ordine di focus, 2.4.7 Focus visibile, 4.1.2 Nome, Ruolo, Valore e 2.5.3 Label in Name.

Pattern fondamentali

• Usa elementi nativi: <button>, <a>, <input>, <details>/<summary>. Evita “div-bottoni”: richiedono JS extra per gestire tastiera e stato ARIA.
• Gestione del focus: ordine DOM coerente con la lettura; niente tabindex>0 diffuso; usa :focus-visible per indicatori chiari.
• Componenti complessi: implementa i pattern WAI-ARIA APG (roving tabindex per tablist/menù/slider) e sincronizza gli aria-* con lo stato reale.
• Niente trappole: evita/risolvi le keyboard trap; i modali devono potersi chiudere con Esc e bottone “Chiudi”.
• Nome accessibile: il testo visibile deve far parte del nome accessibile del controllo (2.5.3), es. “Cerca” → “Cerca”.

Esempi

Pulsante vero (consigliato)

<button type="button">Apri menu</button>

Se devi proprio creare un “div-bottone” (sconsigliato)

<div role="button" tabindex="0" aria-pressed="false">Apri menu</div>
<script>
  const btn = document.querySelector('[role="button"]');
  function activate(e){ if(e.type==='click' || e.key==='Enter' || e.key===' ') { /* azione */ e.preventDefault(); } }
  btn.addEventListener('click', activate);
  btn.addEventListener('keydown', activate);
</script>

Tablist con roving tabindex (principio)

<div role="tablist">
  <button role="tab" aria-selected="true" tabindex="0">Profilo</button>
  <button role="tab" aria-selected="false" tabindex="-1">Impostazioni</button>
</div>
<div role="tabpanel">…</div>

Test rapidi

• Naviga la pagina con Tab/Shift+Tab: puoi raggiungere tutti i controlli? l’ordine è logico?
• Attiva i controlli con Enter/Space: funzionano come con il click?
• Apri un dialog: c’è focus visibile, chiusura con Esc e ritorno al trigger?

Errori comuni

• Affidarsi a JS che intercetta Tab impedendo l’uscita da componenti.
• Usare link come bottoni (o viceversa), perdita di semantica e comportamenti attesi.
• Controlli non focusabili, indicatori di focus rimossi, ordine di focus che segue il layout visivo ma non il DOM.