L’idea di adottare questo tipo di spazi pubblicitari non è nata da noi. Credo che voi tutti ricordiate il grande successo ottenuto da quella che fu definita “The Million Dollar Homapage“. Una semplice pagina html ricoperta da centinaia di mini banner che hanno permesso al geniale ideatore di diventare milionario.

Molti siti internet utilizzano oggi lo stesso principio per guadagnare attraverso le proprie pagine. Tra i molti esempi possiamo sicuramente citare CSS Remix e Italian Web Gallery.

Nella maggior parte dei casi, passando il cursore del mouse sul mini banner, compare una tendina (tooltip) che offre alcune informazioni aggiuntive sul banner stesso come, ad esempio, il nome, la tagline o semplicemente un link al sito che ha pagato per mettere l’inserzione.

Questa interessante funzionalità viene spesso realizzata con l’utilizzo di codice JavaScript. Ma cosa succede se l’utente naviga le pagine del sito con i JavaScript disabilitati? La risposta è molto semplice. L’utente non vedrà la tendina con le informazioni aggiuntive. Questo significa che parte del contenuto non sarà accessibile.

Interessati ad utilizzare questo sistema su CSSGlance, abbiamo cercato di capire come fosse possibile realizzare lo stesso piacevole effetto di hover, garantendo comunque l’accessibilità dei contenuti della pagina. La soluzione è molto semplice: occorre utilizzare i CSS. E’, infatti, possibile creare tooltip, sul modello di quelli realizzati con l’impiego del JavaScript, interamente con l’impiego delle tecniche CSS. Questo significa produrre una funzionalità semplice, utile e soprattutto accessibile, in quanto funziona perfettametne anche se l’utente naviga con i browser disattivati.

Ecco quello che vogliamo ottenere e, adesso, vediamo come è possibile raggiungere questo risultato, analizzando il codice utilizzato nei dettagli.

Cio’ che ci serve è una semplice lista di link. Ecco come si presenta il codice XHTML di base:

<ul>
<li><a href="http://www.google.com"> <span>Google.com</span></a></li>
<li><a href="http://www.yahoo.com"> <span>Yahoo.com</span></a></li>
<li><a href="http://www.cssbeauty.com"> <span>CSSBeauty.com</span></a></li>
...
</ul>

A questo punto non ci resta che far flottare gli elementi <li> al fine di posizionarli l’uno accanto all’altro. Occorre poi impostare un posizionamento relativo per i link, in modo da permettere agli span contenuti in essi di posizionarsi in maniera assoluta rispetto al link padre. Gli span devono avere impostata anche la proprietà display:none, che viene variata in display:block ogni qual volta il puntatore del mouse passa sopra il mini banner. Potrete facilmente risolvere i bug di ie utilizzando la proprietà z-index per il tootip e per gli altri contenitori del vostro layout.

Quello che segue è il codice CSS di base:

#miniadv ul{margin:0;padding:0;list-style:none}
#miniadv ul li {float:left;margin:0 2px 2px 0}
#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px}
#miniadv a:hover{z-index:10}
#miniadv a span{display:none}
#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}

Ecco il risultato finale! Potete scaricare l’esempio (zip-9KB) e utilizzarlo liberamente nei vostri siti internet. Vi preghiamo di inserire un riferimento e un link a CSSGlance nella pagina in cui userete questa tecnica.

Concordo con l’autore quando afferma che il rischio è spesso quello di confondere il mezzo con il fine dell’accessibilità, ovvero applicare meccanicamente tecniche che riteniamo valide senza interrogarsi sulla loro reale utilità. La guida di Diodati vuole dunque essere prima di tutto un tentativo di dar voce alle richieste degli utenti beneficiari dell’accessibilità: intende fornire cioè agli sviluppatori gli strumenti di base per cercare di rendere semplice il complesso, con la consapevolezza che l’accessibilità universale non esiste e non può esistere.

Successivamente all’uscita nelle librerie, Diodati si impegnerà in un nuovo progetto, quello di rendere i contenuti del libro accessibili e consultabili liberamente sul web. Ulteriore sforzo concreto da parte di Diodati per aiutare chi si occupa di web ad affrontare la sfida con i giusti mezzi.