Con i CSS è possibile creare una mappa del sito che non solo abbia un buon design visivo, ma che sia anche realizzata con alcuni accorgimenti relativi alla sua accessibilità. Scopo del presente articolo è appunto quello di indicare alcune strategie per migliorare l'accessibilità di questo tipo di documento senza rinunciare al design.
Introduzione
Una mappa del sito è un requisito fondamentale se si vuole garantire un buon livello di accessibilità ed usabilità al sito stesso. La realizzazione di una mappa del sito non richiede particolari accorgimenti tecnici, se non alcune pratiche comuni per garantirne la fruibilità, quali:
- una mappa del sito dovrebbe permettere all'utente di raggiungere ogni documento presente sul sito
- le etichette date alle varie sezioni dovrebbero essere coerenti con i titoli e i contenuti delle pagine
- una mappa del sito dovrebbe mantenere la sua completa fruibilità anche con i CSS disabilitati o non supportati.
L'ultimo punto ci porta a scegliere una tipologia di elementi compatibili con tale requisito, ossia gli elenchi ordinati, non ordinati e di definizione. Infatti tali elementi, oltre ad essere pertinenti a livello semantico, permettono di avere la massima compatibilità anche con quei programmi utente che non supportano i CSS.
Una semplice mappa del sito
Cominciamo col vedere una semplice struttura (X)HTML:
<div id="mappa">
<h2>Mappa del sito</h2>
<h3>Legenda</h3>
<ul id="legenda">
<li class="recente"><p>Documento recente</p></li>
<li class="obsoleto"><p>Documento obsoleto</p></li>
</ul>
<dl>
<dt><a href="#">Home Page</a></dt>
<dd>La pagina principale del nostro sito.</dd>
<dt><a href="#">Articoli</a></dt>
<dd>Gli articoli del nostro sito.
<ul>
<li class="recente"><a href="#" title="Articolo recente">Articolo 1</a>
<p>Descrizione dell'articolo.</p></li>
<li class="recente"><a href="#" title="Articolo recente">Articolo 2</a>
<p>Descrizione dell'articolo.</p></li>
<li class="obsoleto"><a href="#" title="Articolo obsoleto">Articolo 3</a>
<p>Descrizione dell'articolo.</p></li>
<li class="obsoleto"><a href="#" title="Articolo obsoleto">Articolo 4</a>
<p>Descrizione dell'articolo.</p></li>
</ul>
</dd>
<dt><a href="#">Contattaci</a></dt>
<dd>La sezione dove puoi contattarci.</dd>
</dl>
</div>
Il nostro CSS potrebbe essere:
#mappa {
margin: 1em 0;
padding: 1.5em;
border: 3px double #000;
font-family: "Trebuchet MS", Trebuchet, sans-serif;
}
#mappa h2 {
margin: 1em 0;
font-size: 1.2em;
color: #000;
background: transparent;
text-transform: lowercase;
padding-bottom: 2px;
border-bottom: 1px solid #ccc;
}
#mappa h3 {
margin: 1em 0 1em 2.5em;
padding-bottom: 2px;
border-bottom: 1px solid #ccc;
font-size: 1.1em;
font-variant: small-caps;
color: #000;
background: transparent;
}
#legenda {
margin: 0 0 0 3.5em;
padding-left: 0;
padding-bottom: 2px;
border-bottom: 1px solid #ccc;
list-style: square;
}
#legenda li {
margin: 0;
padding: 0;
}
#mappa li p {color: #000; background: transparent;}
#mappa li.recente {color: #00c000; background: transparent;}
#mappa li.obsoleto {color: #f00; background: transparent;}
#mappa dl {
margin: 0 0 0 3.5em;
padding-left: 0.2em;
border-left: 1px solid #ccc;
}
#mappa dt {
margin: 0 0 1em 1em;
padding-top: 1em;
background-image: none;
font-weight: bold;
font-variant: small-caps;
}
#mappa dd {margin: 1em;}
#mappa dl ul {
margin: 1em 2.5em;
list-style: square;
}
Poichè si è deciso di marcare i documenti recenti ed obsoleti con due colori diversi, al fine di evitare di usare
un'immagine di sfondo per gli elementi li abbiamo usato il seguente accorgimento:
#mappa li p {color: #000; background: transparent;}
#mappa li.recente {color: #00c000; background: transparent;}
#mappa li.obsoleto {color: #f00; background: transparent;}
In questo modo solo il marcatore verrà colorato, e non il paragrafo al suo interno. Se non conosciamo esattamente quali elementi verranno usati all'interno della voce di elenco, possiamo adottare una soluzione più generica:
#mappa li * {color: #000; background: transparent;}
Gli elementi diversi dai link saranno di colore nero. I link resteranno invece del colore specificato, in quanto il selettore universale ha una specificità minore di un selettore di tipo.
Poichè abbiamo deciso di fare affidamento sul colore per distinguere i vari tipi di documento, dobbiamo necessariamente adottare anche una soluzione alternativa per quegli utenti che non possono distinguere le informazioni dal colore:
<a href="#" title="Articolo recente">Articolo 1</a>
Grazie all'attributo title inseriamo un'informazione aggiuntiva sul link in questione. Tale attributo dovrebbe
essere sempre usato a tale scopo.
Per i browser testuali come Lynx è opportuno invece dichiarare esplicitamente questa informazione accanto ad ogni link, nascondendola ad esempio ai browser visuali:
.none {position: absolute; top: -1000em;}
La precedente dichiarazione andrà applicata all'elemento che contiene l'informazione aggiuntiva. Per esempio:
<span class="none">[Articolo recente]</span>
<a href="#">Articolo 1</a>
L'aggiunta di uno spazio unificatore impedisce a Lynx di visualizzare il contenuto dell'elemento a ridosso del contenuto
che segue. In alternativa si può usare un elemento di blocco. Con questa aggiunta possiamo anche considerare
l'opportunità di non usare l'attributo title o di usarlo con del contenuto differente.
Aggiungere immagini di sfondo
Possiamo aggiungere delle piccole icone accanto ai link in modo da far capire agli utenti il tipo di file che andranno a visionare o a scaricare. Per esempio:
dt {
font-weight: bold;
padding-bottom: 2px;
border-bottom: 1px solid #ccc;
}
dd {margin-left: 1.5em;}
dd ul {
margin-left: 1.5em;
padding-left: 3px;
border-left: 1px solid #ccc;
list-style: none;
}
dd ul li {
margin: 0.5em 0 0.5em 0;
padding: 0 0 2px 1.5em;
border-bottom: 1px solid #ccc;
}
dd ul li.pdf {background: url("pdf.gif") no-repeat left center;}
In questo caso l'icona viene posizionata sull'elemento li, al fine di evitare i noti problemi di Internet Explorer
Windows nella gestione delle immagini di sfondo sugli elementi inline.
Dato che abbiamo fatto di nuovo affidamento su un dato visuale, dovremmo inserire nel documento delle informazioni aggiuntive
per i lettori di schermo ed i browser testuali. Possiamo usare sia l'attributo title che un elemento nascosto.
In generale sarebbe bene che tutti gli utenti avessero accesso alle seguenti informazioni:
- tipo di file
- dimensione del file
- data di inserimento nel sito
- ultima modifica