Competenza · Design UI/UX

Un sistema di design in cui il contrasto è calcolato, il movimento ha un pulsante di arresto e ciò che non supera la verifica è scritto in chiaro.

Lavoriamo con token di colore con rapporto di contrasto calcolato, pattern di tastiera verificati elemento per elemento e animazioni che si fermano in base alla preferenza di sistema. Verifichiamo con uno strumento, su pagine reali, e pubblichiamo anche ciò che è fallito.

Parliamo di un progetto

Già costruitoSistemul rulează pe site-ul acesta și se poate inspecta. Tokenul `--muted: #666b65` obține între 4,72:1 și 5,45:1 pe cele șapte fundaluri ale sitului — recalculat de noi cu formula de luminanță din WCAG, nu preluat dintr-un instrument. Opt culori scrise direct în foaia de stil produceau 2,88–4,49:1; le-am găsit cu axe-core 4.10.2 rulat pe zece pagini live și le-am înlocuit cu tokenul, iar corectura e deja în foaia servită de producție. A doua implementare verificabilă: mecanismul de oprire a animațiilor — 38 de elemente animate la infinit pe pagina de start, toate acoperite de un buton de pauză, plus regula globală care anulează animațiile la `prefers-reduced-motion: reduce`.

La maggior parte dei «sistemi di design» è una palette e un elenco di componenti. Il nostro inizia con qualcosa di più noioso e più utile: ogni colore di testo ha un rapporto di contrasto calcolato rispetto a ogni sfondo su cui compare effettivamente. Non «sta bene», ma un numero. Il token del testo secondario di questo sito, `--muted: #666b65`, ottiene tra 4,72:1 e 5,45:1 sui sette sfondi usati. La soglia richiesta per il testo piccolo è 4,5:1.

Quel numero non è nato dal buon senso. Ho eseguito axe-core 4.10.2 su dieci pagine del sito proprio e l’unica regola WCAG violata sistematicamente era il contrasto: da 31 a 43 nodi per pagina, di cui 31 provenivano da intestazione e piè di pagina, quindi si moltiplicavano su tutti i 147 indirizzi. Otto colori scritti direttamente nel foglio di stile producevano da 2,88:1 a 4,49:1. Il peggiore, a 10 px e 3,72:1, era proprio la riga con i link legali — il percorso che una persona segue quando vuole esercitare un diritto.

La seconda parte del sistema è il movimento, trattato come funzione, non come decoro. Nella pagina iniziale ci sono 38 elementi animati all’infinito. Tutti sono coperti da un pulsante di pausa: alla pressione passano allo stato fermo, l’etichetta cambia e lo stato viene annunciato per i lettori di schermo. Separatamente, una regola globale annulla qualsiasi animazione e transizione quando il sistema richiede movimento ridotto, interrompe lo scorrimento fluido e nasconde persino il pulsante di pausa, che diventa inutile. Ho verificato anche la trappola classica — un’animazione che parte da un’opacità quasi zero e lascia il contenuto invisibile quando viene annullata: qui non esiste.

Il resto è disciplina: indicatore di focus visibile, di 2 px, applicato solo alla navigazione con tastiera; percorrenza con le frecce nei gruppi di tab, secondo il modello raccomandato; moduli con errori annunciati come alert e conferme annunciate come stato. E una regola che manteniamo stretta: ciò che non abbiamo potuto verificare si scrive come non verificato. L’audit proprio ha una sezione sui limiti dello strumento, e due difetti trovati lì sono ancora aperti — sono più sotto, con nome.

Cosa comprende

Il lavoro, per componenti

I colori sono token, e il contrasto è un numero calcolato

La palette sta in un blocco di 14 variabili, e il testo secondario usa un solo token: `--muted: #666b65`. I rapporti, ricalcolati con la formula di luminanza relativa del WCAG sui sette sfondi del sito: 5,45:1 su bianco, 5,15, 5,11, 5,03, 5,02, 4,79 e 4,72. Il testo principale, `--ink: #181a19`, ottiene 17,49:1 su bianco; l’accento verde `#355c46`, 7,58:1. Quando un colore non raggiunge la soglia, si cambia il token, non si argomenta in riunione.

I componenti hanno un pattern da tastiera, non solo aspetto

Il gruppo di tab della pagina iniziale usa un indice di tabulazione mobile: solo il tab attivo è accessibile con Tab, gli altri sono esclusi dall’ordine, e le frecce sinistra/destra, Home ed End spostano il focus, con il comportamento predefinito del tasto annullato. È il modello delle pratiche raccomandate per componenti accessibili, implementato, non citato. Nei componenti di base del sito ci sono 21 etichette accessibili, 7 stati premuto/non premuto, 3 collegamenti tra titolo e regione, 2 stati di selezione, 2 regioni che annunciano cambiamenti e 2 collegamenti tra comando e pannello che controllano.

Il movimento ha un pulsante di arresto e si spegne secondo la preferenza del sistema

Nella pagina iniziale ci sono 38 elementi animati all’infinito, avviati automaticamente, che durano più di cinque secondi — esattamente la situazione regolata dal criterio «Pausa, arresto, occultamento». Tutti e 38 sono coperti da pulsanti di pausa: alla pressione, le animazioni passano allo stato fermo e lo stato del pulsante cambia. Separatamente, a `prefers-reduced-motion: reduce` una regola globale annulla qualsiasi animazione e transizione, interrompe lo scorrimento fluido, elimina lo spostamento al passaggio del mouse e nasconde il pulsante di pausa. Nel foglio principale ci sono sette blocchi del genere, più uno nel foglio di base.

Indicatore di focus visibile, solo dove serve

Contorno solido di 2 px, nel verde di accento, con 5 px di distanza, applicato tramite `:focus-visible` — quindi compare nella navigazione con tastiera e non al clic con il mouse. Verificato nel browser, elemento per elemento, sull’intestazione e sui primi comandi del contenuto: quattro elementi diversi, lo stesso contorno. Da nessuna parte nel foglio di stile esiste un contorno rimosso senza sostituto.

Moduli che annunciano i propri stati

Nel modulo di contatto del sito, le etichette sono implicite sui campi, l’errore è marcato come alert e la conferma come stato — quindi i lettori di schermo li annunciano senza che l’utente debba cercare. La trappola per bot è nascosta correttamente: genitore senza display, marcato come nascosto per le tecnologie assistive e rimosso dall’ordine di tabulazione. L’audit proprio conferma che le regole di etichettatura, di nome per i selettori e di completamento automatico passano tutte.

La verifica si fa con uno strumento, su pagine reali

Eseguiamo axe-core 4.10.2 sulla pagina live, non in un ambiente di test, su un campione di dieci pagine che copre pattern diversi: la pagina iniziale, il catalogo, una pagina di prodotto, l’indice dei servizi, una pagina di servizio, la matrice delle soluzioni, una combinazione della matrice, il contatto, i prezzi, un articolo e un documento giuridico. Il risultato grezzo si scrive in pagina, con il numero di nodi, non riassunto in «conforme».

Ciò che fallisce si pubblica, non si arrotonda

Dallo stesso audit: a 320 px di larghezza, il comando nell’intestazione e il pulsante del menu superano lo schermo di 22 px e la pagina scorre orizzontalmente — l’aritmetica è 362 px di contenuto in un contenitore di 280 px. Nei documenti giuridici, i link nel testo non si distinguono dal testo circostante se non per il colore, e il rapporto tra accento e testo del corpo è 1,01:1, quindi la sottolineatura è obbligatoria. Entrambi sono aperti, con rimedio scritto. Li pubblichiamo perché un acquirente che chiede accessibilità merita di vedere come appare un elenco di difetti reale.

Niente tema scuro — detto, non simulato

Il sito non ha tema scuro. Il blocco di token è dichiarato per tre selettori che ricevono valori identici, e nel codice non esiste alcuna regola per la preferenza dello schema di sistema. Verificato nel browser con schema scuro emulato: la pagina resta bianca. La conseguenza utile: tutti i rapporti di contrasto misurati sono validi in entrambi gli schemi. La conseguenza spiacevole: l’interruttore del tema è codice morto dal punto di vista del colore. Un vero tema scuro significa rimisurazione completa del contrasto, non copia dei valori.

Tipografia con regole, non con preferenze

Un’unica famiglia per titoli e testo, con spaziatura tra le lettere regolata per livello — più stretta nei titoli grandi, `-0,055em` ai livelli uno e due, `-0,035em` al livello tre — e peso 500 per i titoli. I paragrafi usano l’equilibratura delle righe, così non resta una parola sola nell’ultima riga. Il contenitore ha una larghezza massima di 1240 px con margini di 48 px, e i pulsanti hanno la stessa altezza di riga ovunque. Sono regole scritte nel foglio di stile, quindi si applicano anche dopo che ce ne andiamo.

Come si presenta

Il percorso, passo dopo passo.

L’inventario dei compiti e dei punti di blocco

La prima consegna è l’elenco delle cose che le persone vengono davvero a fare, in ordine di frequenza, con il punto in cui oggi si fermano. Senza di esso, qualsiasi nuovo schermo è una preferenza estetica. Con esso, ogni decisione successiva ha un criterio.

I token e la verifica del contrasto, prima degli schermi

Si stabiliscono i colori, gli sfondi su cui appaiono effettivamente e il rapporto di ciascuna coppia, calcolato. Consegniamo la tabella delle coppie con i loro rapporti. È molto più economico che scoprire alla fine che la palette scelta non può essere usata per testo piccolo.

I componenti, con il pattern da tastiera scritto insieme all’aspetto

Ogni componente interattivo riceve, nello stesso commit, aspetto e comportamento: cosa succede con Tab, con le frecce, con Escape, cosa viene annunciato e in che modo. Il pattern da tastiera aggiunto in seguito è una riscrittura, non un’integrazione.

L’audit con strumento, su pagine reali, con il risultato grezzo consegnato

Eseguiamo lo strumento su un campione che copre pattern diversi e consegniamo l’output grezzo, non un riassunto. Ogni constatazione riceve il punto nel codice, il criterio violato, la correzione proposta e il criterio di verifica dopo la correzione — per esempio: il numero di nodi di contrasto deve scendere a zero sulla pagina che contiene solo intestazione e piè di pagina.

La consegna, con l’elenco di ciò che non è stato verificato

Consegniamo i token, i componenti, il documento di audit e l’elenco di ciò che non è stato possibile verificare, con il motivo. Per questo sito l’elenco include l’attivazione da tastiera e l’emulazione della preferenza di movimento ridotto nel browser — entrambi limiti dello strumento, entrambi scritti come tali.

Un ciclu în 3 pași

I dati

Cosa tocchiamo, dove risiedono e quanto rimangono

Le domande che pone chiunque abbia un responsabile della protezione dei dati — poste qui prima che le ponga lui.

Cosa raccogliamo nella fase di ricerca: I compiti che le persone devono davvero svolgere, il contesto in cui li svolgono e il punto in cui si bloccano. Quando questo presuppone registrazioni, interviste o l’osservazione di sessioni reali, prima si stabilisce chi partecipa, cosa viene registrato, chi ha accesso e per quanto tempo viene conservato — per iscritto, non per intesa tacita.
I risultati dell’audit di accessibilità: L’output grezzo dello strumento, il raggruppamento dei nodi per la coppia colore–sfondo, i rapporti ricalcolati in modo indipendente e il punto nel codice di ciascun colore. Si consegna come documento versionato accanto al codice, non come presentazione — così chiunque possa riprodurre la misurazione con i comandi nell’allegato.
Cosa finisce nel codice e cosa resta in discussione: I token, i componenti, i pattern di tastiera e le regole di movimento finiscono nel foglio di stile e nei componenti. Le preferenze che non si possono esprimere come regola — „să arate mai cald” — restano decisioni da discutere, non si infilano come valori scritti direttamente nei componenti. Da lì arrivano, di solito, i colori che non superano la verifica.
Le preferenze del visitatore: La preferenza per il movimento ridotto si legge dal sistema, tramite una media query, e non viene memorizzata da noi. Non c’è tema scuro da ricordare. La misurazione del traffico passa attraverso lo strumento configurato sul progetto e si attiva dopo il consenso; non dipende dal sistema di design, ma dalla stessa pagina.
Ciò che non presumiamo: Non presumiamo che un risultato automatico significhi conformità. Lo strumento rileva una parte dei criteri; il resto richiede una verifica manuale, e alcune cose non è stato possibile verificarle affatto con gli strumenti disponibili — l’attivazione da tastiera, per esempio, perché il pannello del browser usato non produce l’attivazione per impostazione predefinita. Nel audit è scritto così: non verificato, non superato.

Un caso

Otto colori, una sola variabile, e la lista rimasta aperta

La situazione

Sito proprio, rifatto di recente, con un sistema di token già esistente. Nessuno aveva segnalato nulla. La domanda non era „si presenta bene?”, ma „che cosa dice uno strumento che non ha opinioni?”.

Cosa abbiamo costruito

Abbiamo iniettato axe-core 4.10.2 nella pagina live e l’abbiamo eseguito su dieci pagine scelte per pattern diversi. L’unica regola WCAG violata sistematicamente era il contrasto. Abbiamo raggruppato i nodi per coppia testo–sfondo, ricalcolato ogni rapporto con la formula di luminanza relativa dello standard — per non dipendere da un solo strumento — e cercato ogni colore nel foglio di stile. Otto valori scritti direttamente nel codice producevano tutti i fallimenti permanenti: 3,89:1 sui 25 link nel piè di pagina, 2,88:1 sui numeri dei passaggi, 3,72:1 sulla riga con i link legali, e altri cinque tra 3,99 e 4,49. Il token corretto esisteva già; il problema era che otto regole lo aggiravano.

Cosa è emerso

Gli otto valori sono stati sostituiti con il token, e il token è stato regolato in modo da superare la soglia su tutti e sette gli sfondi del sito. Verificato due volte: nel repository non compare più nessuno degli otto colori, e il foglio di stile servito oggi dalla produzione contiene solo il token. Ricalcolato in modo indipendente: 4,72:1 nel caso peggiore e 5,45:1 su bianco. Il resto dell’audit ha confermato ciò che era già corretto — l’indicatore di focus, il pattern da tastiera nei gruppi di tab, le etichette e gli stati nel modulo, la copertura completa delle animazioni con pulsanti di pausa.

Cosa non dice il caso

Due constatazioni sono rimaste aperte e sono scritte come tali: a 320 px di larghezza l’header supera lo schermo di 22 px, e nei documenti legali i link nel testo si distinguono solo per colore, con un rapporto di 1,01:1 rispetto al testo circostante — il solo colore non basta, serve la sottolineatura. E il limite del metodo: uno strumento automatico copre una parte dei criteri. L’attivazione da tastiera non ha potuto essere testata con gli strumenti disponibili ed è segnata come non verificata, non superata.

Domande

Cosa ci chiedono le persone prima di chiamare

Cosa significa „design accessibile” da voi, concretamente?

Significa numeri, non aggettivi. Il testo secondario su questo sito usa un solo token, `#666b65`, che ottiene tra 4,72:1 e 5,45:1 sui sette sfondi in cui appare — la soglia richiesta per il testo piccolo è 4,5:1. Il focus è un contorno di 2 px che appare solo durante la navigazione da tastiera. Il movimento ha un pulsante di arresto e si annulla completamente con la preferenza di movimento ridotto del sistema. Ognuna di queste affermazioni ha un posto nel codice e un modo di verifica.

Come verificate? Con quale strumento?

axe-core 4.10.2, eseguito nella pagina live, su dieci pagine che coprono pattern diversi — la pagina iniziale, il catalogo, una pagina prodotto, l’indice e una pagina di servizio, la matrice delle soluzioni e una sua combinazione, i contatti, le tariffe, un articolo, un documento legale. Il risultato grezzo, con il numero di nodi per pagina, entra nel documento. Su questo ricalcoliamo manualmente i rapporti di contrasto con la formula dello standard, per non dipendere da un solo strumento. E scriviamo esplicitamente ciò che non è stato possibile verificare.

Cosa è fallito da voi?

Al momento dell’audit, l’unica regola violata sistematicamente era il contrasto: da 31 a 43 nodi per pagina, dei quali 31 da header e footer, quindi moltiplicati su tutti i 147 indirizzi. Otto colori scritti direttamente nel foglio di stile producevano da 2,88 a 4,49:1; il peggiore, a 10 px e 3,72:1, era la riga con i link legali. Tutti e otto sono ora sostituiti con il token, e la correzione è nel foglio servito dalla produzione. Restano aperte due cose: a 320 px l’header supera lo schermo di 22 px, e nei documenti legali i link nel testo non si distinguono se non per colore, con un rapporto di 1,01:1 rispetto al testo circostante. Entrambe hanno la correzione scritta.

Perché pubblicate i difetti del vostro sito?

Perché altrimenti “accessibile” è una parola senza costo. Chiunque può scrivere che rispetta lo standard; pochi mostrano la lista delle non conformità, con il numero di nodi e la riga nel foglio di stile. Se lavoriamo insieme, riceverà lo stesso tipo di lista sul Suo sito — incluse le parti che non ci favoriscono. È più economico scoprirlo da noi.

Il sito ha il tema scuro?

No, e lo dico perché è verificabile: il blocco dei token è dichiarato per tre selettori che ricevono valori identici, e nel codice non esiste alcuna regola per la preferenza di schema. Emulando lo schema scuro nel browser, la pagina resta bianca. La parte positiva è che tutti i rapporti di contrasto misurati sono validi in entrambi gli schemi. La parte da risolvere è che un interruttore di tema che non cambia i colori è codice morto. Un vero tema scuro significa una nuova misurazione completa del contrasto — non si trasferisce da quello chiaro.

Le animazioni non disturbano gli utenti?

Possono, ed è per questo che hanno due uscite. La prima: ogni elemento animato all’infinito è coperto da un pulsante di pausa — nella pagina iniziale abbiamo verificato che tutti i 38 sono coperti, zero non coperti. La seconda: con la preferenza di movimento ridotto del sistema, una regola globale annulla qualsiasi animazione e transizione, interrompe lo scorrimento fluido e nasconde perfino il pulsante di pausa. Abbiamo verificato anche la trappola classica: se un’animazione parte da un’opacità quasi zero e viene annullata, il contenuto può restare invisibile. Qui non accade, perché gli elementi non hanno un’opacità di base ridotta.

Consegnate anche il codice, o solo le bozze?

Consegniamo i token e i componenti nel codice. Un sistema di design che rimane nello strumento di progettazione si erode alla prima urgenza: qualcuno scrive un colore direttamente nel componente perché «qui sembra migliore», e dopo sei mesi si hanno otto colori paralleli che falliscono la verifica. È esattamente ciò che è accaduto anche da noi, è documentato sopra, e per questo il token è l’unica fonte di verità per il colore del testo secondario.

Che cosa non potete verificare?

Alcune cose concrete, scritte come tali nell’audit. Attivazione con tastiera: il pannello del browser utilizzato non produce l’attivazione predefinita — premere Enter su un pulsante non genera un clic — quindi non riportiamo conclusioni su Enter e Space. Emulazione della preferenza di movimento ridotto: non siamo riusciti ad attivarla nel browser, quindi la regola è stata verificata nel sorgente, e resta raccomandato un test manuale con la preferenza attiva. E le metriche di caricamento percepito non erano disponibili nello strumento, quindi sono marcate come non misurate, non stimate.

Garantite la conformità WCAG?

No, e nessuno onesto dovrebbe farlo sulla base di uno strumento automatico. Uno strumento copre una parte dei criteri; il resto richiede verifica manuale, e alcuni richiedono utenti reali. Ciò che garantiamo è il metodo: campione dichiarato, strumento e versione dichiarati, risultato grezzo pubblicato, rapporti ricalcolati in modo indipendente, correzione con criterio di verifica e l’elenco esplicito di ciò che non si è potuto verificare. Un certificato senza questo elenco non dice nulla.

Su cosa si basano le affermazioni sopra (15 fonti)

Cele opt culori scrise direct în foaia de stil (2,88–4,49:1) nu mai există nici în depozit, nici în foaia de stil servită de producție; în locul lor e `var(--muted)`https://www.megapromoting.com/_next/static/chunks/0~95cl1qc44v9.css · 2026-09-06

14 di esse sono codice e file dei nostri repository. Non ne pubblichiamo il nome né la riga: insieme, in un'unica pagina, descriverebbero con troppa precisione come sono costruiti sistemi che non sono solo nostri. Le esaminiamo con te, nel repository, su richiesta — la verifica resta possibile, solo che avviene in una discussione.

Come lavoriamo Tutti i servizi

Cosa vorresti che funzionasse meglio?

Raccontaci il tuo processo. Insieme stabiliamo cosa vale la pena costruire, cosa possiamo collegare e come verifichiamo il risultato.

Parliamone