Keyboard trap

Definizione — Una keyboard trap si verifica quando, entrando con la tastiera in un componente (ad es. widget custom, iframe, carosello, editor WYSIWYG), l’utente non riesce più a spostare il focus al di fuori usando i normali comandi (Tab/Shift+Tab, Esc, frecce). È una barriera grave per chi naviga senza mouse e viola WCAG 2.1.2 No Keyboard Trap (A).

Cause tipiche

• Gestione personalizzata del tasto Tab che impedisce l’uscita dal componente.
• Focus ciclato all’infinito senza meccanismo di chiusura (modale non dismissibile da tastiera).
• Elementi fuori sequenza (tabindex>0 diffuso) o overflow:hidden che nasconde controlli necessari.
• Iframe/embedded terzi non tastierabili o senza ritorno del focus all’elemento chiamante.

Buone pratiche

• Non intercettare Tab a meno che non stia gestendo un composito (es. tablist) con pattern WAI-ARIA APG; in quel caso usa roving tabindex e consenti sempre uscita con Tab/Shift+Tab.
• Per i dialog modali: intrappola il focus solo all’interno del dialog e fornisci uscita con Esc e bottone “Chiudi”; alla chiusura restituisci il focus al trigger.
• Per iframe esterni: verifica che siano operabili via tastiera; in alternativa apri i contenuti in pagina o fornisci versione equivalente accessibile.
• Mantieni ordine DOM = ordine di focus e un focus visibile costante.

Esempio (dialog accessibile con uscita)

<button id="open">Apri dialog</button>
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" hidden>
  <h2 id="dlg-title">Impostazioni</h2>
  <button id="close">Chiudi</button>
</div>
<script>
  const dlg = document.querySelector('[role="dialog"]');
  const open = document.getElementById('open');
  const closeBtn = document.getElementById('close');
  function openDlg(){ dlg.hidden = false; closeBtn.focus(); }
  function closeDlg(){ dlg.hidden = true; open.focus(); }
  open.addEventListener('click', openDlg);
  closeBtn.addEventListener('click', closeDlg);
  dlg.addEventListener('keydown', e => { if(e.key === 'Escape') closeDlg(); });
</script>

Test rapidi

• Entra nel componente con Tab e prova a uscire con Tab/Shift+Tab ed Esc (se modale).
• Verifica ordine di focus e ripristino del focus dopo chiusure/azioni.
• Controlla embedded/iframe di terze parti: se intrappolano il focus, offri alternativa.