Come si presentava
Il sito alterna sezioni chiare e sezioni scure, e la barra in alto cambia tema a seconda della sezione che le passa sotto. È un comportamento voluto, arriva dalla landing approvata, e visivamente funziona.
Il difetto compariva solo durante il passaggio, quindi solo in movimento, quindi mai in uno screenshot. Nessuno lo aveva segnalato in mesi. Lo abbiamo trovato campionando il contrasto della nav lungo lo scroll, non guardandola.
Le tre durate che non tornavano
Tre proprietà diverse reagivano allo stesso evento, il cambio di tema, con tempi diversi.
- Il fondo della barra animava su una durata media, quella che il design system chiama battuta.
- Il filtro che inverte il logo animava su una durata breve, il tick.
- Lo sfondo delle stanghette dell'hamburger cambiava subito, senza nessuna transizione.
Finché i valori di partenza e di arrivo erano compatibili, la sfasatura non si notava. Nel passaggio da chiaro a scuro, invece, per la manciata di millisecondi che separa la durata breve da quella media si otteneva chiaro su chiaro: il fondo aveva già finito di cambiare, il contenuto no. In quel momento la barra c'era, occupava il suo spazio, era navigabile da tastiera, e non si vedeva.
Misurato scorrendo la home, il contrasto minimo raggiunto era 1.00 a 900px di larghezza, 1.58 a 768px, 3.41 a 1440px. Il minimo richiesto per il testo dal livello AA delle linee guida di accessibilità è 4.5.
La correzione, in una frase
Il tema non è un'animazione. È un cambio di stato.
Un'animazione descrive un passaggio che l'occhio deve seguire: un pannello che si apre, un elemento che entra. Un cambio di stato descrive due configurazioni valide fra cui non esiste una via di mezzo sensata. Metà strada fra tema chiaro e tema scuro non è un mezzo tema: è un errore temporaneo.
La correzione è stata togliere la transizione a tutte le proprietà che dipendono dal tema e farle commutare insieme, in un fotogramma solo. Il risultato è che il cambio si nota di più, non di meno, e non produce mai uno stato illeggibile. Dopo l'intervento, il contrasto peggiore misurato è 16.94 a tutte le larghezze provate.
Il difetto sotto il difetto
Mentre eravamo lì abbiamo trovato la ragione per cui il tema a volte restava indietro anche senza sfarfallio. Il codice decideva il tema osservando quando una sezione entrava in una banda stretta al centro dello schermo. Con le sezioni più alte di quella banda, l'ingresso non veniva mai osservato e il tema non cambiava affatto.
Anche qui il difetto era concettuale prima che tecnico: si stava usando un meccanismo a eventi per rispondere a una domanda che è sempre vera o sempre falsa, cioè quale sezione si trova adesso sotto la barra. Sostituito con una risposta calcolata a ogni scroll e a ogni ridimensionamento. Nessun evento da aspettare, nessuno stato da ricordare.
Come lo abbiamo bloccato per il futuro
Un bug che nessuno vede non si previene con una revisione del codice. Si previene con una misura.
La suite di test ora campiona il contrasto minimo della barra su centoventi tappe di scroll, a tre larghezze diverse. Se una proprietà del tema tornasse a muoversi da sola, il test fallirebbe prima che qualcuno se ne accorga. Gli undici casi aggiunti coprono anche la soglia del menu mobile e la presenza della call to action dentro lo schermo, perché nello stesso giro avevamo trovato una fascia di larghezze in cui la riga andava in eccedenza di quarantasei pixel e il pulsante finiva fuori dallo schermo mentre l'hamburger non era ancora comparso.
Cosa ci portiamo dietro
Tre cose, in ordine di utilità.
La prima: se una proprietà dipende dal tema, non ha una transizione. Il tema commuta atomicamente, sempre.
La seconda: gli screenshot non trovano i difetti che vivono nel movimento. Se un comportamento esiste solo durante una transizione, va misurato durante la transizione, con uno strumento che campiona nel tempo.
La terza, che è la meno tecnica e la più importante: i difetti di accessibilità peggiori non sembrano difetti di accessibilità. Questo non era un problema di contrasto dei colori scelti, che sono a norma. Era un problema di sincronizzazione. Le liste di controllo per l'accessibilità guardano gli stati fermi, e uno stato intermedio illeggibile è comunque uno stato che qualcuno vede.
