Verifica visiva: colonne, testi e foto su ogni schermo
Una pagina senza overflow può essere comunque difficile da leggere. Verifica proporzioni, contenuti lunghi e interazioni prima di pubblicare modifiche.
Sei controlli ripetibili
Scegliere pagine rappresentative
Prova home, categoria, articolo, servizio, modulo e tabella. Includi un titolo lungo, una lingua da destra a sinistra e più foto.
Confrontare le colonne
Controlla larghezze di 320, 390, 768, 1280, 1440 e 1920 px. Verifica allineamento, ordine di lettura e spazi. Non nascondere i difetti con overflow nascosto.
Ingrandire il testo
Prova il testo al 200 % e il riadattamento a 320 pixel CSS. Informazioni e comandi devono restare accessibili; le tabelle possono scorrere separatamente.
Controllare le fotografie
Verifica ritaglio, soggetto, dimensioni e credito. Non allungare una foto in base al testo vicino. Descrivi il contenuto visibile e indica le foto di repertorio.
Provare le interazioni
Usa la tastiera per menu, filtri, FAQ e moduli. Controlla focus, errori e dati conservati dopo un errore, senza inviare richieste reali.
Conservare le prove
Registra URL, lingua, larghezza, browser, difetto e risultato dopo la correzione. Integra i dati di laboratorio con misure reali quando il traffico è sufficiente.
Scheda di verifica
- URL e lingua
- Schermo e zoom
- Difetto e schermata
- Correzione e risultato del nuovo controllo
Metodo di lavoro, non attestazione di conformità. Adatta il perimetro e documenta le eccezioni.
Prima di pubblicare: sei verifiche funzionali
- Percorrere menu, link, download e cambi di lingua; verificare la destinazione effettiva.
- Usare dati fittizi: campi vuoti, indirizzi invalidi, accenti e testi lunghi.
- Verificare che gli errori identifichino il campo, siano accessibili da tastiera e conservino i dati utili.
- Provare anche la validazione sul server: i controlli del browser possono essere aggirati.
- Distinguere conferma e consegna effettiva; usare una destinazione di test autorizzata.
- Verificare stati senza JavaScript, rifiuti e recupero; non registrare segreti nelle prove.
Situazioni e controlli appropriati
Su schermi piccoli, scorrere la tabella orizzontalmente. Con la tastiera, portare il focus sulla tabella e usare le frecce.
| Situazione | Che cosa indica | Verifica utile |
|---|---|---|
| Un comando scompare con testo al 200%. | L'attività non resta accessibile dopo l'ingrandimento. | Adattare il layout e riprovare con tastiera. |
| Una foto si deforma o lascia un grande vuoto su desktop. | Le proporzioni squilibrano il contenuto vicino. | Controllare limiti di dimensione e ordine di lettura. |
| overflow: hidden taglia una tabella. | I dati sono nascosti. | Dare alla tabella uno scorrimento proprio accessibile da tastiera e celle con testo a capo. |
| Un titolo tradotto viene tagliato. | Provare una sola lingua non basta. | Provare testi lunghi, lingue RTL e il cambio effettivo di lingua. |
Esempio fittizio
Una pagina di servizio fittizia appare corretta a 1.440 pixel. A 320 il titolo tradotto lungo viene tagliato; con testo al 200% un comando FAQ diventa inaccessibile.
Limitare la foto, permettere alle colonne di restringersi e al testo di andare a capo. Ripetere il percorso a 320, 390, 768 e 1.440 pixel, con testo ingrandito e tastiera. Registrare difetti residui e riprovare dopo le correzioni.
Criteri di validazione
- Informazioni e comandi sono leggibili a larghezze e in lingue rappresentative.
- Ingrandimento del testo e tastiera permettono di completare l'attività.
- Versione, browser, lingua e risultati della nuova prova sono registrati.
Domande pratiche
Basta una schermata?
No. Mostra un solo stato. Prova anche contenuti lunghi, tastiera e stati aperti, filtrati o con errori.
Esiste una dimensione universale del testo?
No. Valuta leggibilità, lunghezza delle righe, zoom e contrasto. La sola dimensione non garantisce accessibilità o equilibrio.
Come leggere i Core Web Vitals?
Le soglie di buona esperienza sono LCP ≤ 2,5 s, INP ≤ 200 ms e CLS ≤ 0,1 al 75° percentile. Misurano caricamento, interazione e stabilità, senza sostituire la verifica visiva.
Serve una schermata per ogni dispositivo possibile?
Scegliere famiglie principali di pagine, attività utili e browser con differenze osservate. Documentare i limiti: poche schermate non provano tutti i dispositivi.
Come dare priorità alle correzioni visive?
Risolvere prima attività bloccate, dati nascosti e leggibilità. Poi migliorare proporzioni, allineamento e spazi, verificando il funzionamento delle altre pagine.