Banner accessibile con i CSS

Solitamente sono stati introdotti, e lo sono ancora, come file grafici nelle pagine html, oppure in flash, mettendo in mostra l' abilità del designer mostrando una quantità di colori, scritte, movimenti quanto più veloci per attirare l'attenzione dello stesso utente.

Tutto questo viene visualizzato, anche se la pagina è riempita da un fastidioso "rumore visivo", da un utente normodotato. Cosa succede, invece, se un utente ha problemi di ipovisione o, ancora peggio, di totale cecità? Quando vengono disabilitati i CSS dell' autore o quando i programmi di lettura schermo "traducono" la pagina senza i files grafici, cosa succede?

Se anche lui fosse interessato a cliccare su quel banner, vuoi per curiosità, vuoi per acquistare il prodotto pubblicizzato da quella azienda, quest' ultima perderebbe un potenziale acquirente. O no? Perchè non estendere a tutti la possibilità di fruire al 100% delle pagine che navighiamo? Per fare questo ci avvarremo sì di files grafici, in "collaborazione" però dei CSS. Possiamo realizzare questo banner con un semplice effetto di link oppure con un effetto :hover; possiamo divertirci come vogliamo. Quello che ci serve sono due immagini di 468 X 60 pixel [parliamo dei banner che solitamente si inseriscono nella testata di una pagina]. Dopo averle realizzate, possiamo ad implementare il suddetto banner nella pagina htm.

Il codice CSS

Tutto quello che c' è da fare è inscrivere l' immagine in un elemento di blocco; associargli, attraverso le pseudoclassi i 2 stati [a ed a:hover] e "nascondere" ai browser grafici la descrizione alternativa che verrebbe interpretata dai lettori di schermo. Cominciamo:

#banner{ 
margin: 0 auto;
padding:0; 
height:60px;
width:468px;
background:url(banner1.gif) left top no-repeat transparent; 
}  

questo codice non dovrebbe risultare per nulla nuovo a coloro i quali "masticano" CSS da un pò. Abbiamo stabilito le dimensioni del box e dichiarato il suo sfondo che, nel nostro caso, è l'immagine del banner. Questo serve anche per il "precaricamento" nel browser e non fare attendere che la stessa debba essere richiamata dalla directory in cui si trova. Proseguiamo e dichiariamo i due stati di link ed :hover.

#banner a 
{ 
display:block; 
height:60px; 
width:468px;
} 
#banner a:hover{ 
height:60px;
width:468px; 
background:url(banner2.gif);
} 

Anche in questo caso non mi pare di aver scritto del codice che abbia bisogno di particolari spiegazioni. Passiamo adesso all' ultima dichiarazione che è la più importante e che nasconde il testo associato al banner. Si stratta di una classe "invisibile" per i normodotati ma resa visibile dai lettori di schermo. Essa è:

.testo-nascosto {display:none }

Questo è tutto quello che ci serve per ottenere il banner accessibile. Vedremo adesso come scrivere il codice html nella pagina:

 
<div id="banner"><a href="#" title="Descrizione  del banner e dello sponsor"><span class="testo-nascosto">Messaggio  promozionale dello sponsor </span></a></div>

Poniamo il caso che tutto questo codice venga letto da uno screen reader. Nella pagina, senza nessun foglio di stile associato, si leggerà: "Messaggio promozionale dello sponsor" ovviamente linkato al sito dell' azienda. Nella pagina di esempio, senza CSS, è presente tale frase. Invece il banner che abbiamo realizzato fino ad ora apparirebbe nella sua forma classica come potete vedere nella pagina finale di esempio. Come si è potuto vedere non ci vuole molto per rendere condivisibile una pagina web tra tutti gli utenti. Oltre che standardizzare il web, rendiamolo uno strumento più democratico.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati