Accessibilità di un sito: primi test da tastiera e da mobile

Accessibilità e prestazioni web · 6 lettura minima

Per effettuare i primi test di accessibilità del tuo sito da tastiera e da cellulare, prova un percorso utile senza mouse, poi su un vero cellulare. Verifica che ogni comando rimanga accessibile, identificabile e utilizzabile, anche con testo ingrandito. Documentare i blocchi con i passaggi per riprodurli. Questo approccio prepara correzioni mirate; non consente di dichiarare il sito conforme.

Da ricordare

• Testa un'azione completa, non solo l'aspetto del messaggio di benvenuto.
• Un pulsante visibile non è necessariamente utilizzabile sulla tastiera.
• Su dispositivi mobili, controlla anche moduli, zoom ed elementi fissi.
• Dopo la correzione, riprodurre esattamente lo stesso percorso.

Prepara i test senza interrompere l'attività

Scegli un percorso comune: trova un servizio e completa una richiesta, oppure seleziona un prodotto e unisciti al carrello. Aggiungi componenti condivisi, come il menu, il banner di ricerca e di consenso. Annotare l'indirizzo di ciascuna pagina, il browser e il dispositivo utilizzato.

Per l'invio di moduli o i pagamenti, utilizzare un ambiente di test autorizzato. Sul sito pubblico, fermati prima di un'azione che creerebbe una vera richiesta o ordine. Preparare un elenco di anomalie con quattro informazioni: passaggi, risultato osservato, risultato atteso ed evidenza visiva.

Testare la navigazione tramite tastiera

Segui il focus da un comando all'altro

Vai alla barra degli indirizzi, quindi usa Tab per andare avanti e Maiusc+Tab per tornare indietro. Il focus designa l'elemento che riceve i comandi da tastiera; un segnale visivo deve consentire di localizzarlo. Deve rimanere visibile e seguire un ordine comprensibile, secondo l' primi controlli di W3C. Se perdi questo segnalino, annota l'ultimo comando identificabile.

Prova Invio sui collegamenti e Invio o Spazio sui pulsanti, a seconda di come funzionano. Per i componenti che lo forniscono, utilizzare anche le frecce. Verifica che le stesse azioni rimangano disponibili anche senza puntare il mouse: apri il menu, scegli una variante, rimuovi un articolo dal carrello.

Controllare aperture e uscite

Aprire ciascun pannello o finestra in sovrimpressione sulla tastiera. Riesci a raggiungerne il contenuto e la chiusura? Dopo la chiusura, puoi riprendere la navigazione in una posizione coerente? Il focus contenuto in una finestra aperta non è necessariamente un problema. Il blocco appare se non è più possibile uscirne utilizzando un comando accessibile, senza riprendere il mouse.

Controlla il sito dal telefono

Rifai il percorso in verticale, poi guarda cosa cambia in orizzontale. Prova gli ordini vicini tra loro: filtro, quantità, chiusura, scelta di consegna. Nota i supporti che innescano una cattiva azione. Controlla che un banner fisso non nasconda contenuti utili o il pulsante per continuare.

Ingrandisce il testo con le impostazioni disponibili. Su un computer completare con un test di zoom 200 % e, se possibile, ingrandendo solo il testo. Le etichette e i messaggi devono rimanere leggibili, senza sovrapposizioni. IL criterio di ridistribuzione di W3C fornisce, per il contenuto a scorrimento verticale, una larghezza equivalente a 320 pixel CSS senza scorrimento in due direzioni, con eccezioni per le parti che richiedono effettivamente un layout bidimensionale, come alcune mappe o tabelle di dati. Queste eccezioni non si estendono automaticamente al resto della pagina. Un test telefonico da solo non verifica questo criterio.

Controlla i moduli durante la digitazione

I campi mantengono un titolo comprensibile una volta completati? Il guida W3C sulle etichette consiglia le etichette associate ai campi. Non confondere un'indicazione che scompare durante la digitazione con una formulazione sufficiente. In un ambiente di test, lascia vuoto un campo obbligatorio: identifica l'errore, trova il campo e correggilo. Sul telefono controlla anche cosa nasconde la tastiera virtuale.

Esempio illustrativo: menu impossibile uscire

In questo esempio fittizio, un negozio di ceramiche mostra un menu mobile in sovrapposizione. La sua apertura funziona tramite tastiera, ma la croce di chiusura non è accessibile. L'anomalia si descrive così: aprire il menù con Invio, sfogliarne i collegamenti con Tab, notare l'assenza di una chiusura accessibile. Il risultato atteso è quello di poter chiudere il menù della tastiera, per poi riprendere la navigazione.

La correzione deve ripristinare il funzionamento della chiusura della tastiera ed un ritorno coerente della messa a fuoco; allargare la croce non basta. Il test successivo verifica questi due punti, quindi verifica la chiusura al tocco. Da questo esempio non si deducono risultati commerciali.

Lista di controllo operativa

• Definisci il percorso e le sue azioni finali, con un framework di test sicuro.
• Vai su ciascun comando sulla tastiera e individua il focus.
• Apri e chiudi menu, pannelli e finestre senza mouse.
• Testare scelte, input ed errori sul telefono.
• Controllare l'ingrandimento e gli elementi fissi.
• Trasmette ogni anomalia con i suoi passaggi e il risultato atteso.
• Riproduci nuovamente i percorsi interessati dopo la correzione.

Limitazioni ed errori comuni

Uno strumento automatico o un'acquisizione mobile non sostituisce questi test. Testare solo la ricezione tralascia i passaggi decisivi. Anche confondere comfort visivo e completa accessibilità è rischioso: questi test non coprono tutti i contrasti, le alternative di immagine, i contenuti multimediali o gli usi delle tecnologie assistive. W3C specifica che i suoi controlli preliminari potrebbero non rilevare ostacoli significativi.

Domande frequenti

Perché eseguire il test senza mouse se i visitatori lo utilizzano?

Alcuni visitatori navigano tramite tastiera o utilizzano dispositivi che si basano su comandi da tastiera. Il test rivela comandi inaccessibili e vicoli ciechi che il mouse può nascondere.

Il display del computer portatile è sufficiente?

Aiuta a esaminare il layout, ma non riproduce tutto: tocco, tastiera virtuale, impostazioni del telefono e comportamento del browser. Completalo su un dispositivo reale.

Questi controlli dimostrano la conformità normativa?

No. Identificano alcuni ostacoli. La valutazione della conformità richiede un ambito e un metodo adeguati; Gli obblighi applicabili alla tua attività richiedono una verifica separata.

Passaggio successivo

Documentare il primo blocco che impedisce un'azione importante, quindi assegnarne la correzione con un criterio di validazione osservabile. Per individuare questo supporto nel tuo progetto, consulta il servizi 4SYSTEM. Conserva il foglio di prova per verificare la correzione.

Fonti e risorse

• W3C: primi controlli di accessibilità.
• W3C: comprendere la ridistribuzione dei contenuti.
• W3C: associa etichette a campi.