Come rendere leggibile una tabella di dati: il problema della cella orfana, da VisiCalc agli screen reader

La scheda è piccola, pulita, quasi timida. Fondo color carta, un’icona di quattro quadratini blu e in alto la dicitura Accessibility / Data Tables. Sotto c’è un titolo che è già un programma di lavoro: Give Table Cells Their Context, cioè dare a ogni cella il suo contesto. A sinistra c’è una tabellina di tre colonne (Plan, Email, Phone) e due righe (Basic, Plus). Dentro, quasi ovunque, la stessa parola: Included. A destra due riquadri di codice, uno blu notte e uno lilla, con th scope=col e th scope=row. In fondo, su una fascia chiara, la frase che secondo me vale tutta la scheda: il grassetto da solo non crea un’intestazione di tabella.

Per lavoro mi è capitato decine di volte di rivedere tabelle di altri: listini, capitolati, quadri economici, dashboard. Il difetto che trovo più spesso non riguarda i colori o i font. È quello che chiamo il problema della cella orfana. Scorri fino alla riga 40, leggi «12,5» e non sai più a cosa si riferisce. La scheda lo mostra con un esempio minimo: una cella che dice Included non comunica niente se non sai di quale piano e di quale canale si parla. Da qui si capisce come rendere leggibile una tabella di dati.

Perché questa scheda funziona

Come pezzo di information design la scheda è fatta bene, e conviene capire perché prima di passare alla teoria. La gerarchia è chiarissima: titolo nero e pesante, sottotitolo grigio, poi due colonne che dialogano tra loro, il problema a sinistra e la soluzione a destra. Le intestazioni della tabella di esempio sono in blu su una fascia leggermente più scura e le intestazioni di riga (Basic, Plus) sono in grassetto su un grigio appena percettibile. Visivamente quindi la tabella sembra già avere delle intestazioni. Ed è proprio lì che la scheda colpisce: quello che vedi non è necessariamente quello che la macchina capisce.

Il trattino nella cella Basic/Phone è una scelta piccola ma corretta. Una cella vuota è ambigua, perché potrebbe essere un dato mancante o un errore di caricamento. Il trattino invece dice «non previsto». Anche la fascia finale con tre azioni (dare un nome alla tabella, ispezionare l’HTML, provare la navigazione) è un buon esempio di chiusura operativa: tre verbi e tre righe, niente di più.

La cella orfana è un problema antico

Chi ha sfogliato un vecchio orario ferroviario o un prontuario tecnico conosce i trucchi che la stampa usava per tenere l’occhio agganciato ai dati: intestazioni ripetute in cima a ogni pagina, filetti sottili, righe alternate leggermente ombreggiate. Quest’ultima tecnica, lo zebra striping, si usa su carta e su schermo da circa mezzo secolo. Eppure nel 2008 la ricercatrice Jessica Enders ha notato una cosa sorprendente: le prove empiriche della sua utilità erano quasi assenti. Il suo esperimento non ha trovato miglioramenti costanti di velocità o accuratezza. Ha però ipotizzato che le righe alternate possano aiutare quando le colonne sono molto distanti o quando bisogna scorrere in orizzontale.

Uno studio più recente, pubblicato nel 2024 su IEEE Transactions on Visualization and Computer Graphics da Ji, Perin e Nacenta, ha precisato il quadro con tracciamento dello sguardo e del mouse. Per trovare il valore massimo funzionano meglio la colorazione delle celle e le barre dentro le celle. Per un compito più complesso, come confrontare differenze proporzionali, le righe alternate hanno aiutato più di colori e barre. Ne ricavo una regola pratica che applico da anni: non esiste un aiuto visivo buono per tutto, esiste l’aiuto giusto per la domanda che il lettore fa alla tabella.

1979: la griglia diventa un indirizzo

La svolta concettuale arriva con il software. Dan Bricklin, quando ancora studiava alla Harvard Business School, sviluppa insieme a Bob Frankston VisiCalc, il primo foglio di calcolo elettronico. Il Computer History Museum lo considera tra i motori della crescita del personal computer. La loro società, Software Arts, nasce nel 1979. L’intuizione progettuale che ci interessa qui è semplice: ogni cella ha un nome, fatto dalla lettera della colonna e dal numero della riga. La cella orfana trova una sorta di anagrafe, perché sai sempre dove sei anche quando non vedi più le intestazioni.

Però un indirizzo come C40 non è ancora un significato. Sapere di essere in C40 non ti dice che quella è la colonna del fatturato. Per questo i fogli di calcolo successivi, Excel in testa, hanno introdotto i riquadri bloccati: la prima riga e la prima colonna restano ferme mentre scorri tutto il resto. È lo stesso principio delle intestazioni ripetute sulle pagine stampate, solo trasferito su uno schermo che scorre all’infinito.

Sul web: quello che vedi e quello che si sente

Qui torniamo alla scheda. Su una pagina web una tabella può sembrare perfetta ed essere muta per chi non la guarda. Le persone cieche o ipovedenti usano lettori di schermo che leggono la tabella cella per cella. Se le intestazioni sono solo testo in grassetto dentro celle normali, il lettore di schermo dice «Included», poi di nuovo «Included», e nient’altro. Se invece le intestazioni sono marcate con il tag th e con l’attributo scope, che indica se valgono per la colonna o per la riga, il software può annunciare qualcosa come «Plus, Phone: Included». È lo stesso meccanismo per cui, in una tabella di bilancio fatta bene, si sente «marzo, fatturato: 12,5».

Il tutorial sulle tabelle della Web Accessibility Initiative del W3C (la scheda ne porta la firma in basso a destra) lo spiega con molta chiarezza. Le celle di intestazione vanno marcate con th e quelle di dati con td. Per le tabelle con un’intestazione di riga e una di colonna serve scope, perché senza di esso il rapporto tra intestazioni e dati diventa ambiguo. Per le tabelle più complesse si usano gli attributi id e headers. La didascalia, cioè il tag caption, dà un nome alla tabella ed è utile quasi sempre. È il primo dei tre consigli nella fascia in basso della scheda.

Dietro c’è un criterio preciso delle WCAG, le linee guida internazionali sull’accessibilità dei contenuti web: il criterio 1.3.1, Info e relazioni, di livello A. In sostanza dice che le informazioni, la struttura e le relazioni comunicate con l’aspetto visivo devono essere riconoscibili anche dal software, oppure disponibili come testo. Il grassetto è aspetto visivo. Il tag th è struttura. In Italia queste regole entrano nella norma UNI CEI EN 301 549, richiamata dalle Linee guida AgID sull’accessibilità degli strumenti informatici. Con l’European Accessibility Act, applicato dal 28 giugno 2025, l’obbligo riguarda anche molti servizi digitali privati e non solo la pubblica amministrazione.

Cosa dicono gli utenti

Un lavoro presentato alla conferenza CHI 2022 da Wang, Wang, Jung e Kim ha raccolto le linee guida esistenti e ha osservato come persone cieche o ipovedenti usano davvero le tabelle online. Gli autori hanno costruito un’estensione per il browser che rende più accessibili le tabelle trovate in rete. I partecipanti hanno riferito di capire meglio struttura e disposizione dei dati e di recuperare più in fretta i singoli valori. Il messaggio per chi progetta è che la struttura non è un dettaglio tecnico. È il modo in cui una parte dei lettori si orienta nella tabella.

Le soluzioni di oggi, una per ogni tipo di smarrimento

Nella mia esperienza ogni tecnica moderna risponde a un modo diverso di perdersi.

Intestazioni fisse: servono quando scorri in verticale e perdi il nome delle colonne. Su web si ottengono con un’intestazione che resta agganciata in alto, nei fogli di calcolo con i riquadri bloccati.
Evidenziazione a croce: al passaggio del mouse o al tocco si illuminano insieme la riga e la colonna della cella. È utile nelle tabelle larghe, dove l’occhio deve fare due viaggi per incrociare i dati. Va usata come aiuto, non come unico veicolo di informazione.
Etichette dentro le celle su mobile: sotto una certa larghezza la tabella si trasforma in una pila di schede, e ogni valore porta con sé la sua etichetta. Funziona bene per le schede prodotto o i piani tariffari. Funziona male quando l’utente deve confrontare valori in verticale, perché il confronto si perde.
Righe alternate o filetti leggeri: alla luce degli studi citati li uso con misura, soprattutto nelle tabelle molto larghe. Le griglie piene, con ogni cella chiusa da un bordo nero, fanno più rumore che ordine.
Struttura semantica: th, scope e caption. Non si vede ma è la base di tutto il resto.

Cosa puoi fare subito nei tuoi fogli

Qui l’aggancio pratico viene da sé, perché quasi tutti abbiamo una tabella da sistemare: il preventivo dei lavori di casa, il bilancio di condominio, l’elenco delle spese.

Blocca le intestazioni. In Excel si trova in Visualizza, Blocca riquadri: puoi bloccare la prima riga, la prima colonna o entrambe, selezionando la cella subito sotto e a destra di ciò che vuoi tenere fermo. Google Sheets ha un comando equivalente nel menu Visualizza.
Dai un titolo esplicito alla tabella e unità di misura chiare nelle intestazioni: Importo (euro) e non Importo.
Togli la griglia piena e lascia filetti orizzontali sottili o un’alternanza di righe molto leggera.
Allinea i numeri a destra e usa sempre lo stesso numero di decimali nella stessa colonna, così l’occhio confronta le grandezze senza fare conti.
Non lasciare celle vuote ambigue: un trattino, uno zero o la scritta n.d., a seconda del significato. La scheda lo fa con il trattino nella colonna Phone.

La prova dei dieci secondi

Per capire se una tabella è progettata bene, che sia l’estratto conto della banca, il dettaglio della bolletta o il prospetto delle tariffe sul sito del comune, uso un test molto semplice. Scegli a caso una cella in mezzo alla tabella, lontana dai bordi. Hai dieci secondi per rispondere a due domande: di che cosa parla questo numero? e in quale unità è espresso? Se per rispondere devi scorrere in su, contare le colonne con il dito o tornare indietro di una pagina, la tabella ha celle orfane. Se navighi da telefono, aggiungi una terza domanda: girando lo schermo o scorrendo di lato, perdi la prima colonna? Se sì, chi l’ha progettata ha pensato solo al monitor dell’ufficio.

La scheda del W3C chiude con Test navigation: listen for the right headers, cioè ascoltare se le intestazioni annunciate sono quelle giuste. È l’equivalente sonoro della mia prova. Una tabella ben fatta supera tutte e due le prove, perché in entrambi i casi il principio è lo stesso: nessun dato deve restare senza il suo contesto.