Accessibilità

OnlyTons è realizzato secondo le WCAG 2.2 livello AA. Questa pagina dichiara lo standard che ci siamo dati, come lo verifichiamo, che cosa sappiamo essere ancora sbagliato e come segnalarci ciò che ci è sfuggito.

Se non riesci a usare una parte di OnlyTons, è un difetto e vogliamo saperlo. Vedi Segnalare un problema in fondo: non serve che tu sappia quale regola è stata violata.

Lo standard, e perché proprio questo

WCAG 2.2, livello AA. Non «cerchiamo di essere accessibili», ma uno standard pubblicato, con criteri di successo numerati e verificabili.

Abbiamo scelto la 2.2 AA per tre motivi:

È lo standard richiamato dalla EN 301 549, la norma europea sui requisiti di accessibilità negli appalti pubblici.
L'European Accessibility Act si applica ai servizi di commercio elettronico da giugno 2025. OnlyTons è una piattaforma B2B che opera nell'Unione europea, quindi è probabilmente un obbligo di legge e non una cortesia.
È la versione che ha introdotto i criteri di cui questo prodotto aveva più bisogno: 2.5.8 Dimensione del bersaglio, 2.4.11 Focus non nascosto e 3.3.8 Autenticazione accessibile.

Se l'Act si applichi specificamente a OnlyTons è una domanda per i legali, ed è registrata come tale nel nostro registro delle questioni aperte. Costruiamo comunque secondo il livello AA: la risposta cambia i documenti, non il prodotto.

Come verifichiamo

Tre livelli, e nessuno di essi è sufficiente da solo. Circa un terzo delle WCAG è verificabile da una macchina; il resto richiede una persona.

Livello	Che cosa individua	Quando viene eseguito
Lint (`eslint-plugin-jsx-a11y`, ogni regola come errore)	errori visibili nel codice sorgente: un'etichetta che non punta a nulla, un `<div>` cliccabile, un `alt` mancante	a ogni modifica
Verifica automatica (`pnpm test:a11y` — Playwright + axe-core)	errori visibili nella pagina resa: contrasto dei colori, controlli senza nome, struttura dei titoli, landmark duplicati	a ogni modifica, su tutte le pagine, come visitatore anonimo, come operatore e come broker
Verifica manuale	tutto il resto: se l'ordine di tabulazione ha senso, se ciò che annuncia uno screen reader è utile e non solo presente, se la pagina è usabile allo zoom 200%	prima di ogni rilascio e ogni volta che una schermata cambia in modo sostanziale

La verifica automatica controlla gli insiemi di regole A e AA delle WCAG 2.0, 2.1 e 2.2 più le regole di buona pratica di axe, nel tema chiaro su tutte le pagine e nel tema scuro sulle quattro schermate in cui il colore veicola informazione.

La copertura è imposta, non presunta. L'elenco delle pagine visitate dalla verifica è lo stesso elenco con cui viene confrontato il routing dell'applicazione: non è possibile aggiungere una schermata senza che venga verificata oppure esclusa esplicitamente con una motivazione scritta.

Anche questo manuale viene verificato. Queste pagine fanno parte della piattaforma, su /docs, quindi rientrano nella stessa verifica — e quattro cose che in un file di testo resterebbero invisibili vengono controllate prima ancora che intervenga un browser: nessun livello di intestazione saltato, nessuna colonna di tabella senza intestazione, nessun link interno o riferimento a una sezione che non porta da nessuna parte. La prima esecuzione di quel controllo ha trovato cinque tabelle per lingua la cui prima colonna era priva di intestazione: proprio il tipo di problema che si legge bene e si annuncia male.

Che cosa abbiamo fatto

Cose concrete, così puoi controllarle invece di crederci sulla parola.

Muoversi nella piattaforma

Ogni pagina inizia con un collegamento «Vai al contenuto principale». È invisibile finché non ci arrivi con Tab, poi diventa un pulsante visibile come gli altri. Esiste perché la barra laterale è lunga quattordici voci e non devi doverle attraversare tutte a ogni spostamento.
Ogni pagina ha un solo <h1> che la identifica, così puoi navigare per titoli.
I landmark sono unici e denominati: una regione di navigazione, una regione principale e, dove la pagina ha una colonna di filtri o una scheda, quella regione ha un nome proprio.
Il menu su mobile si chiude con Esc, il suo pulsante dichiara se è aperto e, quando è chiuso, è davvero assente — non semplicemente spostato fuori schermo dove la tastiera potrebbe ancora raggiungerlo.

Moduli e controlli

Ogni campo, elenco a discesa, casella di spunta e pulsante di scelta ha un'etichetta. Dove un controllo non ha un'etichetta visibile — un filtro, il selettore di unità accanto a una quantità — ne ha una parlata.
Le scelte da un insieme chiuso sono veri gruppi di pulsanti di scelta e caselle di spunta, così i tasti freccia funzionano e l'opzione selezionata viene annunciata. Il modulo di contestazione su un contratto era una fila di pulsanti che sembravano selezionati senza dichiararlo: ora è un gruppo di pulsanti di scelta.
Le colonne ordinabili annunciano quale colonna è ordinata e in che verso — e il verso dichiarato è quello effettivamente usato.
I pulsanti composti solo da un'icona hanno un nome parlato. «Modifica ceci», non «pulsante».

Colore e movimento

Nulla dipende dal solo colore. Il riquadro delle condizioni di un contratto mostra un'icona e una parola parlata per ogni esito; il selettore della mappa dichiara quale vista è attiva invece di limitarsi a colorarla.
Il contrasto rispetta il livello AA. Il pulsante delle azioni distruttive misurava 3,99:1 a riposo e 3,31:1 al passaggio del mouse — diventava meno leggibile proprio mentre lo si puntava — e ora misura 6,18:1 e 5,13:1.
Se il tuo sistema richiede il movimento ridotto, tutte le animazioni e le transizioni di OnlyTons vengono soppresse. La verifica automatica viene eseguita essa stessa con il movimento ridotto attivo, così il percorso verificato è proprio quello.

La mappa

La mappa dei terreni è un caso oggettivamente difficile, e la nostra risposta è che la mappa non è mai l'unico modo per ottenere l'informazione.

La tabella è la vista predefinita, non un ripiego. Mostra gli stessi dati della stessa richiesta da cui deriva la mappa, quindi le due non possono discordare.
Un collegamento sopra la mappa porta direttamente alla tabella.
I segnaposto della mappa sono raggiungibili con Tab nell'ordine del documento, ciascuno con un nome parlato che riporta la sua area approssimata, e ciascuno disegna un contorno di focus visibile.
I segnaposto sono disegnati come cerchi e non come spilli, perché la posizione di una particella è volutamente approssimata (vedi Riservatezza degli operatori) e un punto netto dichiarerebbe una precisione che non esiste.

L'accesso

L'accesso con password non richiede di risolvere un rompicapo, interpretare un'immagine o rispondere entro un tempo limite: è il criterio 3.3.8 Autenticazione accessibile delle WCAG 2.2. Il controllo antiabuso è invisibile e non ti chiede di fare nulla.

Che cosa è ancora sbagliato

Dichiararlo fa parte dello standard, ed è più utile per te di una dichiarazione di piena conformità.

Lacuna	Che cosa significa per te	Stato
Trascinare le trattative tra le fasi, nella bacheca del broker, funziona solo con il puntatore.	Chi usa la tastiera non può trascinare.	Non è bloccante: il pulsante «Avanza a…» nella sala trattativa fa la stessa cosa, funziona da tastiera ed è comunque il controllo migliore, perché spiega perché quando un passaggio viene rifiutato. Il trascinamento da tastiera è in elenco.
La procedura guidata di registrazione non è stata provata con uno screen reader.	Non lo sappiamo. È l'unico percorso che la verifica automatica non raggiunge, perché accede con account già approvati.	Coperta dalla verifica manuale; è nella nostra lista di controllo di QA.
La verifica con screen reader non è ancora continua.	Gli annunci sono corretti per quanto possono dire gli strumenti automatici e i nostri controlli manuali, ma non esiste un test di regressione automatico con screen reader. Strumenti del genere in pratica non esistono.	Verifica manuale prima di ogni rilascio.
La mappa è un disegno semplificato, non una mappa completa.	Non puoi spostarla né ingrandirla.	Voluto, per ora. Quando arriverà una vera mappa di base, tutto quanto sopra dovrà sopravvivere al cambiamento, e la tabella resterà la vista predefinita.

Al momento non pubblichiamo una dichiarazione formale di conformità (VPAT o dichiarazione EN 301 549). Se ti serve, chiedila.

Segnalare un problema

Contatta il broker attraverso il canale che usi di solito, oppure scrivi all'indirizzo indicato nella pagina di accesso. Indica per favore:

che cosa stavi cercando di fare (non che cosa pensi sia andato storto sul piano tecnico);
la pagina su cui ti trovavi;
che cosa stavi usando: screen reader e browser, solo tastiera, ingranditore, controllo vocale, qualunque cosa fosse.

Ti risponderà una persona. Un difetto di accessibilità è trattato come un difetto, nella stessa coda di qualunque altra cosa ti impedisca di lavorare.

Nota tecnica

Per chi si occupa della manutenzione.

Lo standard, i gruppi di regole e l'elenco delle pagine si trovano in apps/web/a11y/ e apps/web/src/lib/release/routes.ts.
pnpm test:a11y richiede lo stack Supabase locale attivo e i dati dimostrativi caricati (pnpm docker:supabase && pnpm seed:demo). Accede come il broker e come un operatore dei dati dimostrativi, perché metà del prodotto non è raggiungibile senza una sessione, e una pagina resa come stato vuoto non è quella pagina.
Una sola regola di axe è disattivata e la motivazione è scritta accanto in a11y/sweep.spec.ts (l'overlay di sviluppo di Next, che non viene distribuito). Una regola disattivata senza motivazione scritta è il modo in cui una verifica diventa una formalità.
eslint.config.mjs promuove a errore tutte le regole raccomandate di jsx-a11y. Prima della sessione S12 nel repository non veniva eseguita alcuna regola di lint — la configurazione era un file per ESLint 8 sotto ESLint 9 — quindi i rilievi di accessibilità di quella sessione sono una prima esecuzione, non una regressione.

English → accessibility.md