Cosa va storto nella navigazione da tastiera
L'errore più comune nella navigazione da tastiera è che i componenti interattivi sono visibili, ma non raggiungibili con il tasto Tab. Pensate a un menu che si apre solo con un clic del mouse, a un pulsante che non riceve lo stato di focus, o a un pop-up che non si chiude senza il mouse. Per le persone che non possono usare il mouse a causa di limitazioni motorie, o che utilizzano un lettore dello schermo che funziona sulla navigazione da tastiera, ciò significa che una parte del sito web è semplicemente inutilizzabile.
La causa risiede quasi sempre in componenti personalizzati: uno sviluppatore crea un elegante menu a discesa, un selezionatore di data personalizzato o un filtro espandibile con HTML e JavaScript personalizzati, ma dimentica il supporto della tastiera che un pulsante o un collegamento HTML standard fornisce gratuitamente. L'elemento ha un bell'aspetto e funziona con il mouse, quindi durante i test nessuno si accorge che il tasto Tab semplicemente lo salta.
Perché questo viene spesso trascurato
Questo errore è persistente perché non è visibile a occhio nudo. Chi clicca attraverso un negozio online con un mouse non vede alcun problema. Solo quando si toglie il mouse e ci si sposta nella pagina utilizzando solo Tab, Maiusc+Tab, Invio e i tasti freccia, diventa evidente dove la navigazione si blocca. Poiché questo test raramente fa parte standard di un processo di rilascio, il problema spesso rimane inosservato per anni, fino a quando un visitatore o un'autorità di vigilanza non lo individua.
Una seconda ragione è che molti di questi difetti si verificano proprio nei punti più evidenti durante l'uso: il processo di pagamento, la schermata di accesso, un filtro di ricerca. Questi sono esattamente i componenti che spesso vengono sviluppati separatamente dal resto del sito, con elementi personalizzati che non sempre ricevono la stessa attenzione della navigazione principale.
Come riconoscerlo da soli
Un semplice controllo iniziale consiste nel lasciare il mouse e navigare attraverso il flusso di una pagina utilizzando solo la tastiera. Prestate attenzione a tre cose: ogni elemento cliccabile è raggiungibile con Tab, in ogni momento è chiaramente visibile quale elemento ha lo stato di focus, e ogni componente che si apre (un menu, un filtro, un pop-up) può essere chiuso anche senza il mouse. Se lo stato di focus si blocca in un pop-up, salta in un posto inaspettato o scompare completamente, allora c'è un segnale che c'è del lavoro da fare.
Una scansione automatizzata può segnalare parte di questi problemi, ad esempio indicatori di focus mancanti o elementi senza accesso da tastiera che sono tecnicamente riconoscibili nel codice sorgente. Se un menu a discesa può essere utilizzato in modo logico e prevedibile è però qualcosa che una scansione non può valutare completamente: rimane fondamentalmente un test manuale. Questo vale d'altra parte per più requisiti WCAG, e lo menzioniamo sempre anche nel rapporto. avvia la scansione rapida gratuita delle tue pagine più importanti per vedere quale parte di questi problemi emerge già automaticamente.
Come evitarlo
La soluzione di solito non risiede in ulteriori tecniche aggiunte al sito web, ma nell'uso corretto dei componenti esistenti. Un pulsante o un collegamento HTML standard sono automaticamente raggiungibili con Tab e utilizzabili con Invio; chi invece rende cliccabile un pezzo di testo o un'immagine con JavaScript deve aggiungere il supporto della tastiera da solo. Per i componenti personalizzati come menu, filtri e pop-up, è necessario un accordo chiaro con lo sviluppatore: ogni componente deve essere apribile, utilizzabile e chiudibile con la tastiera, e lo stato di focus deve rimanere visibile e prevedibile.
Quello che non aiuta è un widget di accessibilità che sostiene di correggere questo tipo di difetti con uno script separato. Un overlay di questo tipo non cambia il codice sottostante e quindi non cambia l'usabilità effettiva; la legge richiede un sito web accessibile, non uno strato aggiunto sopra. Consapevolmente non vendiamo widget di questo tipo.
Desiderate sapere quali parti del vostro sito web o dell'app contengono questo tipo di problemi strutturali e quanto pesano nell'elenco delle priorità del vostro piano di miglioramento? Nella banca dati organizzata per argomento potete leggere cosa accade per ogni tipo di difetto, e come viene realizzato esattamente il nostro test vedete quale parte viene testata automaticamente e quale richiede attenzione manuale.
Avete ancora domande su cosa rientra e cosa non rientra in questo requisito, o sul resto del quadro di riferimento della verifica? Le risposte alle domande più frequenti forniscono già chiarezza sulla maggior parte di esse.
La quick-scan gratuita di axessia.eu fornisce immediatamente un'indicazione se questo tipo di problemi di navigazione da tastiera si verificano sul vostro sito, senza che abbiate bisogno di un account.