Da foglio di calcolo a tabella HTML

Una tabella letta una cella alla volta

Quando guardi una tabella, gli occhi saltano in cima alla colonna per ricordare cosa significa un numero. Chi usa uno screen reader sente una cella alla volta e non può dare un’occhiata in alto. Quindi è il codice a dover portare il legame tra un valore e la sua intestazione.

<table>
  <caption>Sales by region, 2026</caption>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">North</th><td>$4,200</td></tr>
  </tbody>
</table>

Con scope="col" e scope="row", la cella viene annunciata come «North, Revenue, $4,200». La caption viene letta quando l’utente entra nella tabella, così può decidere se vale la pena esplorarla. Uno screenshot di un foglio di calcolo non gli dà niente di tutto questo. Inoltre non si può cercare al suo interno e diventa sfocato quando lo ingrandisci.

Come vengono lette le tue celle

Quando copi da Excel, Google Sheets o LibreOffice, negli appunti finisce una versione HTML dell’intervallo. Lo strumento legge prima quella versione, ed è così che le celle unite sopravvivono come colspan e rowspan.

Per un testo digitato o un file CSV (fino a 5 MB, letto come UTF-8, altrimenti come Windows-1252), lo strumento deve capire il separatore. Se c’è un carattere di tabulazione da qualche parte, la questione è chiusa. Altrimenti prova il punto e virgola, la virgola e la barra verticale sulle prime 30 righe e tiene quello che dà il numero di colonne più regolare. Le righe e le colonne vuote attorno ai dati vengono eliminate.

L’intestazione è la prima riga. Se una cella di quella riga è unita verso il basso, l’intestazione si allarga per coprirla, fino a tre righe.

Cosa succede a numeri e date

Una colonna conta come numerica quando almeno l’80 per cento delle sue celle piene si legge come numero. Le colonne numeriche sono allineate a destra, così le cifre si incolonnano.

I numeri interi senza simbolo restano come sono, a meno che la loro colonna contenga anche importi, così i tuoi anni e numeri di riferimento non si ritrovano con un separatore delle migliaia. Un valore che inizia con zero è un codice e non viene mai toccato. Per l’ambiguo 1,234, lo strumento guarda come il resto del foglio scrive i decimali prima di decidere.

Le date vengono riscritte come YYYY-MM-DD, l’unico ordine che nessuno legge male. Per capire se una colonna mette prima il giorno o il mese, lo strumento cerca un valore sopra 12 in una delle posizioni. Quando nessuna cella lo chiarisce, le date restano come le hai scritte e i controlli ti dicono quante sono.

Come leggere i controlli

• Nessuna riga di intestazione, oppure la prima riga sembra dati (più della metà sono numeri o date): aggiungi una riga di titoli nel foglio.
• Colonne senza titolo: una cella di intestazione vuota lascia lo screen reader senza nulla da annunciare.
• Nessuna didascalia: basta una frase breve.
• Celle unite mantenute: valide, ma più difficili da navigare. Separarle e ripetere il valore è più gentile.
• Righe o colonne vuote: in un foglio di calcolo sono spaziatura, in una pagina web sono ingombro.
• Tabella larga: più di cinque colonne con lo scorrimento orizzontale disattivato.

Quando nessun avviso si applica, una riga conferma che la struttura è accessibile.

Due tipi di risultato

Per WordPress

La tabella sta in un <figure class="wp-block-table"> quasi senza stile, così il tuo tema la disegna come qualsiasi altra tabella. Incolla il codice in un blocco HTML personalizzato.

Autonomo

Il codice arriva con un breve blocco <style> legato a un nome di classe unico, per qualsiasi altro sito o per una pagina a sé. Puoi anche scaricarlo come file .html completo.

Con lo scorrimento attivo, il contenitore riceve role="region", tabindex="0" e un’etichetta presa dalla didascalia. Chi usa la tastiera può allora mettere a fuoco l’area e scorrerla con i tasti freccia.

Viaggiano solo i valori delle celle. Formule, colori delle celle, grassetto, larghezze delle colonne e formati numerici che esistono solo nelle impostazioni di visualizzazione del foglio restano indietro.