La parola che mancava
In otto punti di elchi.dev mancava una parola, e senza JavaScript i due moduli mettevano dati personali nell'URL. Ora la build rifiuta entrambe le cose.
In otto punti di elchi.dev, dove doveva esserci una parola, non compariva nulla. Uno era la riga sotto il nostro nome nel piè di pagina di ogni pagina. La pagina dei contatti non aveva un'etichetta per l'elenco degli argomenti. Nessuno se n'era accorto, perché un elemento vuoto non sembra rotto. Sembra niente.
Ora la build si rifiuta di produrre una pagina che chiede un testo inesistente. E i due moduli del sito che inviano qualcosa funzionano senza JavaScript, cosa che prima non facevano.
Come sparisce una parola
I testi di elchi.dev stanno in un catalogo, uno per lingua, che modifichiamo nella nostra dashboard. Una pagina chiede un testo tramite la sua chiave, per esempio contact.topic_label, e la build inserisce le parole. Quando una chiave non esisteva, il template restituiva in silenzio una stringa vuota. Nessun errore, nessun avviso.
Un controllo lo avevamo. Confrontava il catalogo tedesco con quello inglese e faceva fallire la build quando una chiave esisteva in uno e non nell'altro. Così si scopre una traduzione dimenticata. Non si scopre invece una chiave che manca in entrambi, ed era proprio quello che era successo: sei chiavi usate dalle pagine non erano mai state scritte in nessuna delle due lingue. Altre due erano errori di battitura di chiavi che esistevano.
Un paragrafo vuoto, a vederlo, non fa danni. Un legend vuoto invece li fa a chi usa uno screen reader: è il nome di un gruppo di opzioni, e senza di esso gli argomenti del modulo di contatto erano un gruppo di opzioni senza nome.
Cosa fa ora la build
Le pagine leggono il catalogo con una ricerca rigorosa. Chiedere una chiave che non esiste ferma la build, indica la chiave e dice dove aggiungerla. Alla prima esecuzione ne ha trovata un'altra: la pagina 404 chiedeva il testo di un link mai esistito e lo copriva con un ripiego scritto nel template.
Anche lo script di deploy controlla il risultato. Rifiutava già una pagina con un titolo vuoto. Ora rifiuta anche una build che contiene un paragrafo, un'etichetta, una legend, una voce di elenco, una voce di elenco descrittivo, un link, un pulsante o un'enfasi vuoti, e uno span vuoto, a meno che non dichiari di essere decorativo. La ricerca rigorosa scopre una chiave mancante; questo controllo scopre qualsiasi altra cosa che non mostra nulla.
I moduli, senza JavaScript
Il modulo di contatto e il configuratore vengono inviati da uno script, che risponde accanto a ogni campo e non lascia mai la pagina. Quella parte funzionava. Il problema era cosa succedeva senza lo script.
Nessuno dei due moduli diceva come doveva essere inviato, e un modulo che non lo dice viene inviato come GET. Così un browser senza JavaScript metteva nella barra degli indirizzi il nome, l'indirizzo e-mail e l'intero messaggio. Da lì finiscono nella cronologia del browser, nei log del server e in qualsiasi altra cosa registri gli indirizzi. Capita di rado che JavaScript sia disattivato, ma quando succede sono proprio questi i dati che non dovrebbero finire lì.
Ora entrambi i moduli dichiarano method="post" e vanno allo stesso endpoint usato dallo script. Senza script, il browser controlla da sé i campi obbligatori e il server risponde con una pagina: un ringraziamento, oppure una pagina che dice cosa serve al modulo e offre la via del ritorno, insieme al nostro indirizzo e-mail e al numero di telefono.
Una cosa non si trasferisce. Con lo script, il modulo registra quando è comparso sullo schermo, e una richiesta inviata meno di due secondi dopo viene trattata come un bot. Senza script questo timestamp non c'è, quindi quel controllo non si applica. Il campo nascosto che compilano solo i bot invece vale ancora, e così la regola per cui un messaggio con più di quattro link è spam.
Il punto
Un sito statico è veloce perché è fatto di semplici file. E i semplici file fanno esattamente quello che dicono, compreso il nulla, senza lamentarsi. I controlli servono a far sentire forte quel «nulla».
Fonti
- HTML Standard: form submission attributes, WHATWG, consultato il
- Understanding Success Criterion 1.3.1: Info and Relationships, W3C, consultato il
Scritto da Samuel Krauss, Founder. Archiviato in website, accessibility, forms.
Tradotto dall’inglese. Leggi l’originale inglese