Prova da tastiera del percorso di acquisto e-commerce: dal catalogo al riepilogo ordine

Perché testare il percorso d’acquisto con la tastiera

Una prova da tastiera sul flusso e-commerce serve a capire se una persona può passare dal catalogo al riepilogo ordine senza usare il mouse, senza restare bloccata su controlli invisibili e senza dover intuire come completare i campi del form. Le indicazioni W3C WAI ricordano due punti pratici: le funzionalità devono essere operabili da tastiera e i form devono avere etichette, istruzioni e struttura comprensibili. (Keyboard Accessible, Forms Tutorial)

Questa guida non è un audit completo e non dichiara conformità. È un collaudo tecnico parziale, utile per scoprire blocchi evidenti prima del pagamento.

Prerequisiti

Prima di iniziare servono:

un sito e-commerce in staging o in ambiente di test;
una tastiera fisica;
un browser aggiornato;
un percorso reale o quasi reale: home, catalogo, scheda prodotto, carrello e riepilogo ordine;
nessun uso del mouse durante la prova.

Se il sito usa componenti personalizzati, annota in anticipo quali controlli devono essere raggiungibili: filtri, selettori quantità, varianti, pulsanti di apertura pannelli e campi indirizzo. L’obiettivo non è “far passare” la pagina, ma verificare che ogni passaggio sia completabile con la tastiera. (Keyboard Accessible)

Procedura di prova

1) Dalla home al catalogo

Usa solo Tab e Shift+Tab per osservare l’ordine del focus. Verifica che il primo elemento utile sia raggiungibile senza salti strani e che il focus sia sempre visibile.

Risultato atteso: il focus procede in modo logico, i link principali sono accessibili e non ci sono elementi che catturano l’attenzione senza offrire un’azione utile.

2) Dal catalogo alla scheda prodotto

Apri una card prodotto con Invio o Space, a seconda del componente. Se ci sono filtri o ordinamenti, prova ad attivarli con tastiera e controlla cosa succede al focus dopo l’apertura del pannello.

Risultato atteso: filtri, ordinamenti e schede prodotto sono usabili senza mouse; il focus entra nel contenuto giusto e non resta bloccato sul pulsante iniziale.

3) Selezione prodotto e quantità

Esegui una sequenza minima:

seleziona una variante;
imposta una quantità;
aggiungi al carrello.

Esempio concreto:

prodotto: “T-shirt”;
variante: “taglia M”;
quantità: 2.

Risultato atteso: ogni controllo ha un nome chiaro, è attivabile da tastiera e restituisce uno stato comprensibile. Le indicazioni WAI sui form insistono su etichette e istruzioni vicine al controllo corretto. (Forms Tutorial)

4) Carrello

Nel carrello verifica tre operazioni: aumento quantità, diminuzione quantità e rimozione articolo. Dopo ogni azione osserva se il focus resta coerente con il contesto o sparisce.

Risultato atteso: il carrello risponde alla tastiera, le azioni producono un feedback comprensibile e il focus torna su un punto sensato della pagina.

5) Riepilogo ordine

Arriva al riepilogo ordine e controlla i campi ancora modificabili prima del pagamento: indirizzo, note, recapito, eventuali opzioni di consegna.

Risultato atteso: i campi hanno label associate correttamente, le istruzioni sono vicine al controllo e gli eventuali errori spiegano cosa correggere. WAI sottolinea proprio la necessità di etichette e struttura chiara nei form. (Forms Tutorial)

Output didattico atteso

Un esito utile non è solo “funziona” o “non funziona”. È una scheda che dica:

in quale pagina si è interrotta la prova;
quale tasto o sequenza è stata usata;
che cosa ha visto l’operatore;
se il focus era visibile;
se il problema riguarda navigazione, form o feedback dopo l’azione.

Esempio di esito sintetico

Catalogo raggiungibile da tastiera. Il filtro apre il pannello, ma il focus non entra nei controlli interni. La sequenza si interrompe al primo Tab successivo all’apertura.

Registro difetti simulato

I casi qui sotto sono simulati, quindi servono solo come esempio di compilazione.

ID	Punto del flusso	Difetto simulato	Gravità	Controllo consigliato
D-01	Catalogo	Il pannello filtri si apre, ma il focus resta sul pulsante iniziale	Alto	Ripetere con `Tab` e verificare dove atterra il focus
D-02	Scheda prodotto	Il selettore quantità richiede il mouse	Alto	Provare frecce, `Tab`, `Invio` e `Space`
D-03	Carrello	Dopo la rimozione di un articolo il focus sparisce	Medio	Verificare l’elemento successivo nel flusso
D-04	Riepilogo ordine	Le label sono visibili ma non associate ai campi	Alto	Controllare l’associazione nome-controllo
D-05	Form consegna	Un errore appare, ma non indica quale campo correggere	Medio	Correggere un input e leggere il messaggio risultante

Controlli di accettazione

La prova è accettabile quando:

tutte le aree principali si percorrono con tastiera;
il focus è sempre visibile;
non ci sono trappole di focus;
i controlli essenziali hanno label chiare;
i messaggi di errore indicano il campo da correggere;
il flusso si può fermare al riepilogo senza arrivare al pagamento.

Limiti della verifica

Questa procedura non misura velocità, conversione o qualità del checkout. Non prova la conformità completa del sito e non sostituisce una revisione più ampia di accessibilità. Serve però a scoprire rapidamente se il percorso d’acquisto è realmente percorribile da tastiera o solo apparentemente accessibile. (Keyboard Accessible)