Esiste una categoria di prodotti che promette di rendere un sito accessibile incollando una riga di codice: si chiamano overlay, e si riconoscono dall’icona con l’omino stilizzato in un angolo dello schermo. Costano poche centinaia di euro l’anno e risolvono il problema in un pomeriggio.
Se fosse vero sarebbe il mio mestiere a essere in discussione, quindi vale la pena spiegare con precisione dove funzionano e dove no.
Cosa fa davvero un overlay
Un overlay è JavaScript che gira nel browser di chi visita il sito e aggiunge un pannello di comandi. Da lì una persona può in genere ingrandire il testo, aumentare il contrasto, cambiare la spaziatura fra le righe, nascondere le immagini, fermare le animazioni.
Sono cose utili. Se il tuo sito non permette di ingrandire il testo, un overlay che lo permette è meglio di niente.
Il problema è che quelle non sono le barriere che fermano le persone. Sono le più visibili, non le più gravi.
Le quattro cose che un overlay non può fare
1. Non può scrivere i testi alternativi
Un testo alternativo descrive cosa mostra un’immagine e perché è lì. Per la fotografia di un anello in un catalogo di gioielli, la descrizione utile dipende dal contesto: se il testo accanto già dice materiale e misure, l’alternativo serve a dire come si presenta il pezzo; se non lo dice, deve dirlo lui.
Questa è una decisione editoriale. Alcuni overlay generano descrizioni automatiche, e il risultato è del tipo «immagine di un oggetto rotondo su superficie bianca». Tecnicamente c’è un alternativo. Per chi ascolta la pagina, non c’è nessuna informazione.
2. Non può riparare la struttura dei titoli
Chi usa uno screen reader naviga per titoli, come tu scorri una pagina con gli occhi cercando i grassetti. Se una pagina ha tre h1, oppure salta da h2 a h4 perché quel grigio piccolo era più bello, la mappa della pagina è rotta.
Un overlay non può indovinare quale titolo era importante. La gerarchia la decide chi scrive e chi progetta.
3. Non può rendere un modulo compilabile
Qui si gioca la partita vera, perché il modulo è il punto in cui il sito guadagna o perde. Le cose che contano sono: l’etichetta è visibile e collegata al campo, oppure è un segnaposto grigio che sparisce appena scrivi? Quando l’invio fallisce, l’errore è annunciato o compare in rosso da qualche parte in silenzio? L’errore dice come rimediare o dice «campo non valido»? E il CAPTCHA: se è l’unica strada, chi non vede è fuori.
Nessuna di queste cose si sistema da fuori. Sono nel codice del modulo.
4. Non può togliere i dark pattern
Il banner dei cookie con «Accetta tutto» grande e verde e «Gestisci preferenze» scritto piccolo e grigio sotto non è un problema tecnico: è una scelta. Un overlay non la corregge, e in ogni caso il consenso raccolto in quel modo è discutibile per ragioni che riguardano il GDPR e non l’accessibilità.
Cosa guarda chi verifica
Questo è il punto pratico. Le WCAG sono criteri sul contenuto: il contenuto soddisfa il criterio o non lo soddisfa. Un pannello di comandi sovrapposto non cambia il contenuto sottostante, e una verifica fatta guardando il codice e provando la pagina con una tastiera e uno screen reader trova le barriere che erano lì prima.
Aggiungo una cosa che si vede nella pratica: alcuni overlay, intervenendo sul documento dopo il caricamento, entrano in conflitto con gli screen reader e peggiorano l’esperienza di chi li usa già. Nella comunità delle persone con disabilità visiva questi prodotti hanno una reputazione che vale la pena conoscere prima di acquistarne uno.
Da dove partire invece
L’ordine che seguo, dal più al meno urgente:
- Prova il sito con la sola tastiera. Chiudi il mouse in un cassetto e usa Tab, Invio e le frecce. Riesci a completare l’azione principale del sito? Vedi sempre dove sei? Se la risposta è no, hai trovato il problema più grave che hai.
- Misura i contrasti del testo corrente, dei pulsanti e dei link. Il minimo è 4,5:1 per il testo normale e 3:1 per componenti e testo grande.
- Guarda la struttura dei titoli di tre pagine tipiche. Un solo
h1, nessun salto di livello. - Compila il tuo modulo sbagliando di proposito. Leggi gli errori che ti compaiono e chiediti se ti dicono cosa fare.
- Riscrivi i testi alternativi delle immagini che portano informazione, e togli quelli dalle immagini decorative.
Sono cinque controlli che puoi fare oggi, senza comprare niente. Se scopri che i problemi sono nel codice e non hai chi li sistemi, scrivimi: ti dico cosa trovo e in che ordine lo affronterei.
Se dopo aver fatto questi cinque passaggi vuoi comunque aggiungere un overlay, il momento giusto è quello: sopra un sito che funziona, come comodità in più. Non al posto del lavoro.