I vincoli progettuali
Prima di iniziare ad implementare, come buona prassi è bene fare un’analisi accurata su cosa implementare e come.
Il nostro scopo è costruire un calendario che visivamente si presenti come un qualsiasi calendario di qualsiasi altro sito facendo uso di xHTML e CSS. Disabilitando i CSS il nostro calendario non dovrà perdere affatto di significato. Anzi dovrà acquisirne per essere apprezzato ancor più di quanto lo possa essere stato nella sua forma decorativa.
Cosa dovremmo vedere quindi?
Se i CSS sono abilitati la nostra visione dovrà essere di un calendario in forma “tabellare”. Se i CSS fossero disabilitati, la nostra visione dovrà essere di un elenco di N settimane ciascuna riportante sette giorni.
Ogni giorno riportante gli eventi dovrà essere identificato da un link ad una ipotetica pagina degli eventi.
Per consentire ad un cieco di saltare subito all’evento successivo, bisognerà prevedere che il giorno contrassegnato dagli eventi sia seguito da un link indicante: vai alla pagina successiva.
Inoltre si vuole prevedere un navigatore di base che consenta a chi usa uno screen reader di passare immediatamente al primo evento, e alle varie settimane del calendario, indicando per ciascuna settimana il numero di eventi che ci saranno.
Prepariamo il piano di gioco
Come buona regola bisogna armarsi di tanta pazienza e molto sangue freddo quando si decide di sviluppare qualcosa che sia accessibile, gradevole di aspetto e comunque funzionale.
Tenendo fede ai vincoli progettuali iniziamo con il definire alcune regole di stile che ci torneranno utili continuamente nella definizione del calendario.
#box-calendario .hidden{
font-size: 1px;
position: absolute;
left: -9999px;
width:0px;
height: 0px;
overflow: clear;
}
Questa regola ci consentirà di simulare un altra regola che solitamente viene utilizzata nei fogli di stile per nascondere degli elementi ed assicurarsi che gli stessi elementi soggetti a questa regola non occupino dello spazio. La regola di cui sto parlando è: display: none;
La differenza tra l’utilizzare il Display: none; e la regola che abbiamo definito è nel modo in cui uno screen reader interpreta le due.
La soluzione proposta garantisce che qualsiasi screen reader riesca a leggere comunque quello che vi è scritto pur non mostrando di fatto quello che è presente a video.
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…