Tab, Shift+Tab, Enter, Space: i tasti fondamentali

Molte persone non usano mai il mouse. Utilizzano l'intero web con la tastiera, quindi ogni controllo che crea deve funzionare anche solo con i tasti. ⌨️

Il tasto più importante è Tab. Ogni pressione sposta il focus sull'elemento interattivo successivo: un collegamento, un pulsante o un campo del modulo.

Ha premuto qualcosa troppo velocemente? Shift+Tab sposta il focus indietro sul controllo precedente, così gli utenti possono sempre tornare al punto da cui provenivano.

Quando il focus si trova su un collegamento, Enter lo attiva. È l'equivalente da tastiera del clic sull'ancora per raggiungere una nuova destinazione.

Un vero button è speciale: si attiva sia con Enter sia con Space. Questo doppio supporto è offerto automaticamente dall'elemento nativo.

Su una casella di controllo o un pulsante di opzione, Space è il tasto per alternare lo stato. Raggiunga l'elemento con Tab, prema Space e lo stato selezionato passerà da attivo a disattivo o viceversa.

Ecco il vantaggio: collegamenti, pulsanti e input nativi rispondono a questi tasti automaticamente. Non deve configurare nulla manualmente.

Se crea un pulsante fittizio con un div, Tab lo ignorerà completamente. I div e gli span semplici sono invisibili agli utenti della tastiera.

Apra una pagina qualsiasi e prema Tab alcune volte. Osservi l'evidenziazione passare da un controllo all'altro. Questo è esattamente il percorso seguito da chi usa la tastiera.

All'interno di un gruppo di pulsanti di opzione, i tasti freccia spostano il focus tra le opzioni, mentre Tab passa direttamente all'intero gruppo successivo. Tasti diversi, funzioni diverse.

Gli utenti portano queste abitudini ovunque, quindi le rispetti. Un controllo che ignora Enter o Space sembra semplicemente non funzionare a chi usa la tastiera.

Ha imparato le basi della tastiera: Tab e Shift+Tab per spostarsi, Enter per seguire i collegamenti ed Enter o Space per attivare i pulsanti. Gli elementi nativi offrono tutto questo automaticamente. ✅