Tabelle
Tre consigli per tabelle che le persone possono davvero utilizzare
Le tabelle sono efficaci quando contengono dati reali, ma diventano un problema quando vengono utilizzate per altri scopi. Queste tre abitudini ne garantiscono la leggibilità.
I principi fondamentali si possono riassumere così:
- Mantieni ogni tabella semplice
- Contrassegnare le intestazioni delle righe e delle colonne
- Utilizza le tabelle per i dati, mai per l’impaginazione
Mantieni le tabelle semplici
Uno screen reader legge una tabella cella per cella, annunciando la propria posizione man mano che procede.
Le celle unite e le tabelle contenute all’interno di altre tabelle interrompono questa descrizione continua, quindi chi ascolta perde il filo di quale riga e colonna si trovi e rinuncia. La soluzione consiste quasi sempre nel semplificare, non nell’aggiungere ulteriori tag. Cerca di utilizzare una tabella per argomento e un’informazione per cella, e suddividi qualsiasi elemento complesso in due tabelle più semplici.
Alcuni esempi:
- Un orario che stipa «Aula 3, dott. Lynch, ore 9:00» in un’unica cella mescola tre informazioni in un unico spazio. Suddividetelo in tre colonne per l’orario, l’aula e il docente. Ogni cella conterrà così un’unica informazione, che lo screen reader potrà leggere in modo chiaro.
- Unire le celle per creare una riga di sottotitoli all’interno di una tabella rompe la griglia che uno screen reader si aspetta. L’ordine di lettura va fuori strada e chi ascolta perde il filo. Crea invece una seconda tabella separata con una propria didascalia.
- Un’intestazione che si estende e unisce più colonne è difficile da seguire cella per cella. L’associazione tra intestazione e dati diventa ambigua. Assegnate a ogni colonna una propria intestazione semplice, in modo che ogni valore abbia un’etichetta chiara.
Per approfondire l’argomento, ecco due riferimenti:
Contrassegnare le intestazioni di riga e colonna
Le celle di intestazione indicano a uno screen reader quale intestazione appartiene a quale dato.
È questo che permette allo strumento di dire “Matematica, secondo trimestre, 73” invece di limitarsi a “73”. Senza intestazioni, la tabella è un insieme di numeri sparsi senza etichette associate, e un utente di uno screen reader deve contare mentalmente righe e colonne per capire cosa significhi ciascuna di esse. Impostate la riga superiore e la prima colonna come intestazioni con l’ambito corretto e assegnate a ogni tabella una didascalia che la identifichi.
Ecco come appare nella pratica:
- In una tabella dei risultati, impostare i nomi delle materie nella riga superiore come intestazioni di colonna e i nomi degli studenti sul lato come intestazioni di riga. Con l’ambito impostato correttamente, ogni cella viene ora letta con le relative etichette. Uno studente si posiziona su una cifra e sente «Matematica, secondo trimestre, 73».
- Una didascalia come «Risultati del secondo trimestre per materia» identifica la tabella nel suo complesso. Gli utenti di lettori di schermo che navigano in modalità tabella la utilizzano per distinguere una tabella dall’altra. Senza di essa, si ritrovano in una griglia di numeri senza avere idea di cosa rappresentino.
- In una tabella di bilancio in cui sono contrassegnati solo i numeri, un utente di uno screen reader sente “1.200” e non è in grado di capire se si tratti dell’affitto, del totale o del disavanzo. Il numero ha perso la sua etichetta. Delle intestazioni corrette ricollegano il significato a ogni numero.
Due risorse che vale la pena leggere:
- Tutorial W3C WAI sulle tabelle con due intestazioni
- Tutorial W3C WAI sulle didascalie e i riassunti delle tabelle
Utilizzare le tabelle solo per i dati
Una tabella garantisce che il contenuto sia strutturato in forma tabellare, e le tecnologie assistive lo leggono in questo modo.
Se ne usi una per il layout, costringi lo screen reader a una lettura confusa, cella per cella, su qualcosa che non è mai stato una griglia. Se usi l’immagine di una tabella, è ancora peggio, perché un’immagine non ha una struttura che uno screen reader possa utilizzare e nessuno dei testi al suo interno può essere selezionato, cercato o ridimensionato. Se hai dei dati, crea una vera tabella; se stai organizzando una pagina, usa gli stili di layout.
Ecco come si presenta nella pratica quotidiana:
- Uno screenshot di un foglio di calcolo incollato come immagine non ha una struttura che uno screen reader possa utilizzare. Nessuna delle cifre può essere selezionata, cercata o ridimensionata. Ricostruiscilo come una vera tabella e tutto ciò tornerà disponibile.
- L’uso di una tabella solo per affiancare due blocchi di testo costringe a una lettura cella per cella di qualcosa che non è mai stato tabulare. L’ordine di lettura può risultare confuso. Utilizzate intestazioni o stili di layout per la disposizione e riservate le tabelle ai dati.
- Un elenco di “pro e contro” disposto in una tabella a due colonne solo per motivi estetici viene utilizzato come espediente di impaginazione. Trasformatelo in una vera e propria tabella di dati con intestazioni appropriate oppure presentatelo come due elenchi con intestazione. Entrambe le opzioni mantengono intatto il significato per le tecnologie assistive.
Due risorse per approfondire l’argomento: