La checklist di accessibilità per le landing page

Una landing page accessibile è una pagina che una persona riesce a leggere, a percorrere con il tasto Tab e a inviare senza mouse e senza una vista perfetta. Questa checklist parte dai quattro controlli che intercettano quasi tutti gli errori: contrasto del testo di almeno 4,5 a 1, controlli interattivi di almeno 24 per 24 pixel CSS, uno stato di focus visibile su ogni controllo e un'etichetta vera su ogni campo del modulo. Tutti e quattro costano poco in fase di design e costano tanto da rattoppare dopo.

È sul contrasto che quasi tutte le landing page cadono

Le WCAG fissano il rapporto di contrasto minimo per il testo normale a 4,5 a 1 rispetto allo sfondo, al livello AA. Il testo grande si ferma a 3 a 1. Grande vuol dire almeno 18 punti, oppure 14 punti in grassetto, che nel CSS corrisponde più o meno a 24px o 18.5px in grassetto. I valori non si arrotondano, quindi 4,499 a 1 non passa. Il colpevole abituale è il testo grigio chiaro su bianco. Subito dopo viene il testo bianco sopra una foto, dove il contrasto tiene in cima all'immagine e crolla in fondo.

Anche pulsanti e icone hanno bisogno di contrasto

Il testo è solo metà della storia. Le WCAG chiedono 3 a 1 per i componenti di interfaccia e per gli elementi grafici che portano un significato, rispetto ai colori accanto, sempre al livello AA. Rientrano il bordo di un campo, il contorno di un pulsante, una casella di spunta, una stella di valutazione e qualsiasi icona che da sola comunica qualcosa. Il contorno grigio chiaro di un campo su una card bianca è l'errore più comune su una landing page. Ed è esattamente l'elemento che le persone devono notare prima di poter convertire.

Dai a ogni area di tocco 24 per 24 pixel

Le WCAG 2.2 hanno aggiunto una regola sulla dimensione delle aree, al livello AA. Le aree interattive dovrebbero essere di almeno 24 per 24 pixel CSS. Sono ammesse aree più piccole quando stanno abbastanza lontane da far sì che un cerchio da 24 pixel centrato su ognuna non ne tocchi un'altra. I link dentro una frase fanno eccezione. In pratica la regola colpisce i pulsanti a icona, la X di chiusura di una finestra, le icone social nel footer e i link stretti stretti della riga legale in fondo alla pagina.

L'accesso da tastiera è un test da cinque minuti

Lascia stare il mouse e premi Tab partendo dall'inizio della pagina. Ogni link, pulsante, campo e comando di menu deve prendere il focus in un ordine che segue il layout visivo, e tu devi sempre riuscire a vedere dove sei. È qui che i componenti fatti su misura cadono più spesso. Uno slider costruito con dei div ti intrappola. Una finestra video si tiene stretto il focus. Un header fisso nasconde l'elemento su cui sei appena arrivato. Se non riesci a raggiungere e a far partire il pulsante principale con la tastiera, la pagina è rotta.

Dai a ogni campo del modulo un'etichetta vera

Un placeholder sparisce nel momento in cui qualcuno inizia a scrivere, quindi chi perde il segno non ha più niente da controllare. Gli screen reader trattano il testo dei placeholder in modo incoerente. Metti un'etichetta visibile sopra ogni campo. Tieni il placeholder per un esempio di formato, se ti serve, e collega l'etichetta al campo come si deve, così toccando l'etichetta il campo prende il focus. I messaggi di errore devono dire a parole cosa è andato storto. Il colore da solo non può essere la cosa che segnala un campo non valido.

Le regole UE arrivate nel 2025

L'European Accessibility Act è entrato in vigore il 28 giugno 2025. Vale per i servizi venduti ai consumatori nell'Unione Europea, ecommerce, banche e prenotazioni di trasporto compresi. Si appoggia alla norma EN 301 549, che è costruita sul livello AA delle WCAG. Se vendi a consumatori europei, l'accessibilità è passata da buona pratica a obbligo di conformità. I controlli passano dai singoli Stati membri e non da un unico ente, il che rende l'esposizione più difficile da prevedere, e non più piccola.

Fai questa checklist di accessibilità in venti minuti

Parti da un controllo automatico, poi ignora il punteggio, perché gli strumenti automatici intercettano solo una parte di quello che conta. Percorri tutta la pagina con Tab. Campiona ogni colore di testo e di pulsante con un contrast checker. Porta lo zoom del browser al 200% e verifica che niente si sovrapponga o venga tagliato. Accendi lo screen reader del tuo sistema operativo e ascolta l'hero e il modulo. Correggi i valori di contrasto nei design token invece che pagina per pagina, altrimenti lo stesso errore esce di nuovo sulla pagina successiva.