Perché tabelle e divitis rendono il tuo sito inaccessibile?

Ci sono diversi errori di accessibilità e usabilità molto diffusi tra i web-designer o aspiranti tali,  perché eliminarli dal tuo sito web dovrebbe essere una domanda che contiene già la risposta: se sono problemi è chiaro che vadano eliminati.

La cosa migliore sarebbe eliminare le problematiche a monte, fare dell’accessibilità e dell’usabilità la tua forma mentis: dovresti correggere il tuo approccio nei confronti del web prima di commettere qualche errore.

In ogni caso, che la frittata sia già fatta o che sia soltanto nella tua testa, andremo ora a vedere come eliminare i problemi più comuni che rendono il tuo sito poco accessibile ed usabile.

L’impaginazione a tabelle e le spacer.gif

Fortunatamente è un errore sempre meno comune, ma  per anni è stato un flagello.

Le tabelle servono esclusivamente a rappresentare relazioni logiche fra i dati  (testi, numeri, immagini): se vuoi usarle per qualunque altra cosa, non farlo.

Come non penseresti mai di utilizzare un cavatappi per pettinarti i capelli, non dovresti nemmeno pensare di utilizzare una tabella per impaginare un sito: le tabelle servono per presentare dei dati e basta.

Perché viene fatto quest’uso sbagliato delle tabelle?

L’impaginazione a tabelle si è diffusa nel periodo delle specifiche CSS1, soprattutto per la facilità con cui si poteva impostare un layout a larghezza 100%, per occupare tutta la larghezza della finestra del browser, ed anche grazie ad alcuni programmi di editing wysiwyg (e pure allo strumento “sezione” di Photoshop) che, in tale modalità, creavano direttamente il codice con un uso sconsiderato di tabelle annidate.

A tutt’oggi, chi ancora utilizza le tabelle per impaginare, in genere lo fa per ignoranza; ma andiamo a vedere perché è un problema.

Perché usare le tabelle per l’impaginazione è un male?

Utilizzare le tabelle per impaginare il layout grafico di un sito equivale a produrre una dose esagerata di mark-up presentazionale: una serie di righe e celle (spesso riempite con immagini spaziatrici “spacer.gif”) con dentro altre tabelle che servono a simulare margini e spazi tra gli elementi (cosa che sarebbe compito dei CSS). Questo si traduce in un peso della pagina realmente eccessivo.

Il sito istituzionale del comune de L'aquila è strutturato con un layout tabellare

Il sito del Comune de L’Aquila ha una pagina index che pesa la bellezza di  132.25KB di cui 84.08KB  di codice (cioè di tabelle), con una grafica praticamente inesistente.

Il sito istituzionale del comune di Nettuno è sviluppato su un layout tabellare (oltretutto allineato a destra)

L’index del sito del Comune di Nettuno pesa addirittura 428.69KB, ma quello che colpisce di più qui è l’uso delle immagini divisorie che si ripete per ogni voce del menu:


<td>
	&nbsp;
    <a href="http://www.comune.nettuno.roma.it/comune.php">Home</a>
    <img height="23" src="/graphics/misc_div.gif" width="12" 		 alt="nettuno"></p>
</td>
<p>

Dopo questi esempi penserai che il problema è rilegato ai siti dei comuni, che sono così “brutti” che il problema delle tabelle è solo uno dei tanti. Non è così.

Il sito della BMW utilizza layout tabellari e allineamento a sinistraSe entriamo nei div che compongono la struttura del sito ufficiale della BMW, scopriremo che ci nasconde niente popo di meno che… tabelle!

Per un peso totale di 837.97KB. Certo gran parte del peso è dato da script e dal filmato swf, ma arrivare a 47.88KB di codice html per una pagina così semplice… è un gran bell’errore!

Oltre al peso spropositato, che ha come conseguenza diretta un caricamento molto rallentato, c’è da tenere in considerazione il come le tabelle e gli elementi grafici inseriti in questo modo vengono interpretati dagli screen-reader.

Ad esempio, nel caso del Comune di Nettuno, lo screen-reader leggerà per ogni divisorio l’alt-tag dell’immagine: Home, Nettuno, Sindaco e Giunta, Nettuno etc. Ma se non avessero messo l’alt-tag, la lettura sarebbe stata ancora peggio: Home, misc_div.gif, Sindaco e Giunta, misc_div.gif, e via dicendo.

Problemi correlati

Una naturale declinazione del problema si realizza nella creazione di un codice HTML presentazionale, poiché vengono spesso utilizzati gli attributi tipici delle celle: bgcolor, width, height, background, align, valign, border e via dicendo, o addirittura, come nel caso del Comune di Nettuno, le immagini vengono inserite direttamente nell’html.

Il sito istituzionale del comune di Cervara usa un layout a tabelle e immagini molto pesanti.

Il sito del Comune di Cervara, sempre a tabelle, riesce a pesare in totale 150,69 KB, di cui 129.18KB di immagini non compresse.

Inoltre come accennavo prima, se non prendi le dovute precauzioni, un sito impaginato a tabelle è praticamente impossibile da consultare per disabili non-vedenti, che utilizzano browser testuali e screen-reader per navigare: i browser testuali (tipo lynx) linearizzano il contenuto della tabella partendo dalle righe ed elencandone ogni cella, da sinistra a destra.

Ne consegue che in un caso simile a questo:

Titolo del sito
Voce menu 1 Titolo della pagina
Voce menu 2 Contenuto A Contenuto C
Voce menu 3 Contenuto B Contenuto D
footer

il risultato dato da un browser testuale sarà il seguente:

Titolo del sito

Voce menu 1

Titolo della pagina

Voce menu 2

Contenuto A

Contenuto C

Voce menu 3

Contenuto B

Contenuto D

footer

Portando a una perdita totale del senso logico della pagina.

Un occhio di riguardo dovresti darlo anche agli spider dei motori di ricerca, equiparabili ad utenti non-vedenti: senza i dovuti accorgimenti  il tuo sito verrebbe indicizzato come sopra; ricordati anche che il peso di una pagina oltre ad aumentare il tempo di caricamento della stessa è anche penalizzante verso gli stessi spider.

I rimedi

Se il tuo sito ha un layout grafico impaginato a tabelle faresti meglio a redimerti, a cancellarlo e a rifarlo da capo.

Dovresti fissare bene in mente un’equazione fondamentale, cioè HTML : semantica = CSS : presentazione.

Perciò togli quel <table width=”100%”> e sostituiscilo con un semplice <div id=”contenitore”> a cui puoi assegnare una dimensione del 100% semplicemente definendo la regola: #contenitore{width:100%;}, meglio se in un foglio di stile esterno.

La degenerazione: divitis

Che stai facendo? Ho detto di sostituire la tabella con un div contenitore, non di replicare ogni singola cella e farla diventare un div a sé stante!

Devi stare attento, questo è uno degli errori più comuni: pensare a tabelle, cosa che non devi fare assolutamente. Quando pensi a tabelle, il fatto che tu usi <div> al posto di <td> non fa di te un professionista del web migliore.

Ti porto l’esempio di uno dei siti più famosi al mondo, che non ha bisogno di presentazioni: Facebook, di cui Biroblu ha contato i div. Il verdetto è che una bacheca ne riesce a contenere anche 1612!

Analizzando i div di Facebook è lampante come si sarebbe potuto ovviare al problema, utilizzando via via degli elementi più adatti allo scopo. La struttura di un contenuto (chiamato in genere link) ad esempio è più o meno così:

<div class=”UIImageBlock clearfix storyContent”>

	<img src=”immagine del profilo”>

	<div class=”UIImageBlock_Content UIImageBlock_MED_Content”>

		<div  class=”uiSelector mlm mlm hideSelector uiSelectorRight”> X (Nascondi) </div>

		<div class=”wrap”></div>

		<div class=”actorName actorDescription”>Nome della persona + eventuale tag</div>

		<div class=”mvm uiStreamAttachments clearfix”>

			<div class=”UIImageBlock clearfix”> Immagine del link

			<div class=”UIImageBlock_Content UIImageBlock_MED_Content fsm fwn fcg”>

				<div class=”uiAttachmentTitle”> Testo principale del link (quello in blu) </div>

				<div class=”mts uiAttachmentDesc”> Sottotitolo del link (quello in grigio</div>

				<div>

					<div class=”uiTextSubtitle”>autore del link</div>

					Ora di pubblicazione · Mi piace / Non mi piace più · Commenta · Condividi

					</div>

				</div>

			</div>

		</div>

	</div>

</div>

Non vado oltre nei commenti perché rischio la pazzia, ma tutto questo si sarebbe potuto fare in maniera più semplice, con meno div e classi, utilizzando altri elementi come <blockquote>, <span>, <hn>, <p> e via dicendo. Addirittura i singoli link pubblicati si sarebbero potuti racchiudere in una lista non ordinata (<ul>)  e al posto del

<div class=”UIImageBlock clearfix storyContent”><p>

si sarebbe potuto usare un <li> per ogni link-contenuto. Vorrei farti notare oltre tutto il <div class=”wrap”></div>, l’equivalente di una cella vuota.

Conclusione

Abbiamo visto  nel dettaglio quali sono le problematiche date da un layout organizzato su tabelle e qual è l’alternativa migliore per ovviare a questa pratica errata.

Adesso sei ancora un fermo sostenitore delle tabelle o qualcosa in te si è mosso?

O magari già prima odiavi l’uso improprio dell’elemento <table> ma non sapevi di essere affetto da divitis?

Com’è la struttura del tuo sito? Utilizzi sempre dei div in particolare (mainContainer, content, nav…) o punti a dare uno stile anche agli elementi <html> e <body>? Qual è, per te, la tecnica migliore?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , , ,

L'autore

Appassionata di web-design e web-designer di professione, ha una conoscenza approfondita dell'(x)HTML/CSS, ama sperimentare script in PHP e javascript ed è sempre pronta ad apprendere nuove tecniche. Per i siti preferisce uno stile sobrio con particolare attenzione all'accessibilità e all'usabilità, e soprattutto a quello che c'è sotto la scocca: il codice, rigorosamente standard.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

58 commenti

  1. CRISTIANO
  2. tatac
  3. scienzedellevanghe
  4. marco
    • scienzedellevanghe
  5. Giuseppe

Trackback e pingback

  1. Tweets that mention Perché tabelle e divitis rendono il tuo sito inaccessibile? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by mtx_maurizio, Simone D'Amico. Simone D'Amico said: Perché tabelle e divitis rendono il …

Lascia un Commento

Current day month ye@r *