Le tabelle di layout sono un problema

Anni fa gli sviluppatori costruivano i layout delle pagine con l'elemento table. Questa abitudine persiste nel vecchio codice e continua ancora oggi a causare seri problemi di accessibilità.

Un lettore di schermo tratta ogni tabella come dati. Annuncia righe, colonne e numero di celle per il Suo layout, sommergendo gli utenti con una struttura priva di significato.

Le tabelle di layout spesso distribuiscono il contenuto nelle celle secondo una sequenza confusa. L'ordine visivo e l'ordine di lettura divergono, lasciando gli utenti disorientati.

Il layout moderno appartiene a CSS. Scelga flexbox o grid per disporre una pagina e mantenga l'elemento table solo per dati realmente tabellari.

Quando dispone gli elementi in una riga o in una colonna, flexbox è lo strumento naturale. Si adatta al contenuto senza introdurre semantica da tabella.

Per gestire insieme righe e colonne, CSS grid offre un vero sistema di layout. Separa l'aspetto della pagina dal significato del markup.

Con il layout CSS, il Suo HTML può usare veri landmark come header, nav e main. Gli utenti di lettori di schermo ricevono una mappa significativa invece di un conteggio di celle.

Se non può davvero rimuovere una tabella di layout obsoleta, aggiunga role=presentation. In questo modo elimina la semantica della tabella, così le tecnologie assistive ignorano la griglia.

Consideri role=presentation una soluzione temporanea. La correzione reale consiste nel passare a CSS, rimuovendo il problema invece di nasconderlo soltanto.

L'assenza di caption e th, insieme a celle che contengono intere sezioni invece di valori, è un segnale d'allarme. Questo schema indica quasi sempre una tabella di layout da rifattorizzare.

Si ponga una domanda semplice per ogni tabella: presenta dati organizzati in righe e colonne di valori correlati? In caso contrario, è una tabella di layout che dovrebbe essere sostituita da CSS.

Non usi mai una table per il layout di una pagina. Usi flexbox o grid, riservi table ai dati reali e consideri role=presentation solo una soluzione temporanea per il codice obsoleto.