Introduzione
Un calendario in genere è costruito con una tabella.
Questa tabella è costruita da 5 o 6 righe (in dipendenza dei giorni delle settimane che costituiscono un mese oltre l’intestazione) e 7 colonne (quanti sono i giorni di una settimana).
L’effetto ottenuto con una tabella è tipicamente tra i migliori che si possono ottenere visivamente. Visivamente…Visivamente!
Visivamente???
E se uno avesse problemi visivi? E se qualcuno non riuscisse affatto a vedere? Ah beh la tabella ci viene incontro. Se qualcuno ha provato a scrivere una tabella e darla in pasto ad uno screen reader ci verrà fornita un informazione simile a quanto vi accingete a leggere:
Tabella, sei righe, sette colonne. Riga di intestazione. Colonna uno, Abbreviazione, Lunedì. Colonna due, Abbreviazione, martedì. ... Riga uno, colonna uno, lunedì primo gennaio, colonna due, martedì due gennaio, colonna tre, mercoledì tre gennaio, ... Riga due colonna uno, lunedì sette gennaio,
Insomma tante informazioni, che ci fanno immaginare una tabella. Ciascuno screen reader potrebbe interpretare tali informazioni in modo leggermente differente. Ma il senso della tabella rimane.
Proviamo insieme ad immaginare un’alternativa alle tabelle. Cosa ci potrebbe essere? Immaginato? Si proprio quello. Un elenco puntato non ordinato.
Una causa inconfutabile
Ok quello che abbiamo detto non ci giustifica completamente nell’utlizzare un elenco puntato non ordinato al posto di una tabella.
Allora prendiamo in analisi gli smart phone. Alcuni utilizzano un sistema di parsing del xhtml che linearizza le tabelle. Quale sarebbe la conseguenza di un azione simile?
Lunedì Martedì Mercoledì Giovedì Venerdì Sabato Domenica Lunedì 1 Gennaio Martedì 2 Gennaio Mercoledì 3 Gennaio ...
Quante informazioni inutili, sprecate, non necessarie presentate su uno smart phone!
Lo so non siete ancora soddisfatti della spiegazione, allora cercherò di convincere anche i meno convinti di questa soluzione. Ci sono dei siti che si lodano con la frase “This site is tableless”: “Questo sito è senza tabelle”, allora questi “poveracci” (per modo di dire, non me ne vogliano a male!) dovranno fare a meno di usare un calendario che abbia la forma di un calendario sulle loro pagine? Chi ha risposto si, non ha motivo di proseguire in questo viaggio propositivo su cui si basa questo tutorial.
Ok allora proviamo a sviluppare qualcosa che visualmente somigli ad una tabella, semanticamente mantenga la sua struttura gerarchica, e che sia navigabile in modo accessibile.
Commenti
6 risposte a “Calendario senza tabella? Da oggi è possibile!”
A quanto pare, prescindendo dal fatto che un calendario di per sè non è accessibile, un calendario senza tabelle è semanticamente scorretto: http://dougal.gunters.org/blog/2003/02/21/tables-vs-css
Sicuramente quello che dichiara Dougal non è affatto sbagliato, però quello che ho voluto indicare con questo articolo è che se una qualsiasi persona volesse proporre un calendario che semanticamente resta valido (come lo è la struttura di una tabella) può implementare degli elenchi puntati nidificati.
Fornire tutte le informazioni presentate nell’esempio con solo una tabella avrebbe comportato una deformazione dei contenuti così da renderla illeggibile senza CSS.
Ti propongo di fare una prova e riportare esattamente quello che ho fatto in tabella: con un CSS sicuramente resterà gradevole a leggersi, credo lo sia molto meno senza. :)
Perché semanticamente scorretto?
Visivamente non cambia nulla, per di più è Usabile da parte di tutti …
Un layout table-less non vuol dire che non si possano usare tabelle (dove ha un senso) ma semplicemente che non sono state usate le tabelle per realizzare il layout. IMHO per un calendario è un controsenso, se non che si più modificare il modo di visualizzarlo ricorrendo ad interpretazione diversa del CSS per i diversi dispositivi (per esempio per i palmari/smartphone), ma se si vuole visualizzare come tabella è un uso sbagliato (nonche ci si complica la vita :P )
Altra cosina da aggiungere, manca il mese, e il modo di cambiare mese, ma non dovrebbe essere un problema aggiungere quelle 5 righe di codice :P
ciao
PS: buona pasqua
Questo tutorial è stato pensato per mostrare che con i CSS è possibile ottenere risultati realmente soddisfacenti: riuscendo ad elaborare un calendario altamente accessibile e gradevole d’aspetto. Disattivando i CSS il risultato non è dei peggiori. Anzi paragonato al possibile risultato ottenuto con una tabella che vuole mostrare le stesse informazioni, io credo che forse quanto ottenuto è anche superiore.
Tableless vuol dire layout senza tabelle, ma se volessimo diventare così pignoli da richiedere un sito tableless nel senso stretto della parola?
Credo di aver dato la soluzione per uno degli elementi che di fatto sono più adatti ad essere presentati con una tabella.
IMHO richiedere un layout tableless nel senso stretto della parola non ha senso, il tag <table> esiste nella definizione dello standard XHTML1.1 e anche nella bozza del 2.0 semplicemente perchè ha un senso se usato con coscienza, non vedo perche lo si voglia evitare (quando è utile e gusto usarlo).
E’ come volere un sito con le immagini fatte di <div> di vari colori da un pixel posizionati con l’absolute perchè il sito non deve assolutamente avere immagini, si può fare, ma ha un senso?
Ciao
PS: non voglio sicuramente sminuire il tuo lavoro, ma ritengo che non sia giusto creare calendari senza tabelle, per lo meno se li si vuole visionare in quel modo…