Verso un web accessibile e usabile
|
i-use.it
>
Guide e articoli
>
Css
> La Fahrner Image Replacement Technique: css e immagini di sfondo
La Fahrner Image Replacement Technique: css e immagini di sfondo Articolo letto: 7930 voltedi Marco DeseriCome creare layout di forte impatto grafico con i css e le immagini di sfondo. Una tecnica che garantisce pagine semanticamente corrette senza penalizzare la creatività dei designer. La tecnicaÉ possibile creare layout di forte impatto grafico con un codice pulito, in xhtml e css. Anche se la maggior parte dei primi lavori conformi agli standard si sono distinti per la quasi assenza di immagini a fini estetici, non significa che il nuovo web sarà “solo testo”. Anzi. In questo tutorial parleremo di una tecnica che consente di usare immagini a fini estetici - per esempio, per dare ai titoli un aspetto più ricercato - senza penalizzare la pulizia del codice e il suo valore semantico. La tecnica di base è nota come Fahrner Image Replacement Technique; da questa derivano varianti che tentano di risolvere le questioni di accessibilità lasciate aperte dalla versione standard. Il codice è molto semplice: si tratta di associare ad un elemento un'immagine di sfondo e nascondere il contenuto dell'elemento con la proprietà display:none;. Un esempio (tratto da Stop Design) chiarirà il concetto:
<html>
<head>
<style>
div
{
background-image:url("hello_world.gif");
background-repeat:no-repeat;
height:35px;
}
</style>
</head>
<body>
<div>
<span>Hello world!</span>
</div>
</body>
</html>
A parte la presenza di uno span semanticamente inutile, il problema principale di questo codice riguarda l'accessibilità da parte di screen-reader come JAWS. Se il foglio di stile è linkato (cioè definito con il tag link) il titolo non viene letto ad alta voce, ma nascosto a causa della proprietà display:none. Per far fronte a questi problemi, sono state elaborate versioni alternative della tecnica. Quella che presentiamo è stata proposta indipendentemente da Seamus Leahy e da Stuart Langridge: fa uso della proprietà overflow:hidden.
<html>
<head>
<style>
h1
{
padding-top: 35px; /* altezza dell'immagine */
height: 0px;
overflow: hidden;
background-image: url("divinacommedia.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>
La divina commedia
</h1>
</body>
</html>
Il codice che abbiamo visto produce una pagina con un titolo esteticamente personalizzato: viene visualizzata a schermo l'immagine "divinacommedia.png" mentre il blocco di testo contenuto nel codice html, tra i tag h1, risulterà nascosto. L'uso dell'overflow:hidden e della proprietà height settata a zero sono i responsabili della scomparsa del testo, mentre grazie al padding-top:35px è stato creato lo spazio necessario alla visualizzazione dell'immagine. Vantaggi e svantaggi della Farhner Image Replacement TechniqueL'uso di questa tecnica comporta alcuni vantaggi, che possiamo riassumere:
D'altra parte, come accennato in precedenza, la tecnica presenta alcuni svantaggi. Nella versione originale (quella con lo span) esiste un problema di accessibilità per gli screen-reader, causato dall'associazione della proprietà display:none al testo più significativo della pagina. Questo testo viene nascosto sia ai browser visuali che agli screen-reader[1], ma mentre i browser visuali mostrano l'immagine, gli screen-reader non leggono nulla. Si può ovviare all'inconveniente utilizzando fogli di stile specifici per ogni tipo di user agent, con la proprietà media dei css, ma è una soluzione solo parziale, perché non tutti i browser la intrerpretano correttamente. Anche per la variante che abbiamo proposto nell'articolo, bisogna esprimere una piccola riserva sul livello di supporto della proprietà overflow:hidden da parte dei browser. Le versioni più datate di Netscape presentano problemi nel rendering di questa proprietà, anche se il problema è piuttosto circoscritto. Un'altra incognita deriva dai motori di ricerca, che storicamente puniscono i tentativi di nascondere del testo. Questa tecnica potrebbe venire scambiata come un tentativo di inserire keyword per migliorare l'indicizzazione senza mostrare ai visitatori blocchi di testo che appesantirebbero visivamente la pagina. Al momento, i siti che fanno uso della FIR compaiono molto in alto nel ranking dei principali motori. Tuttavia è opportuno tener conto anche di questa eventualità nel decidere se adottare questa tecnica di progettazione. Risorse
[1] Se il foglio di stile è importato (@import vs link rel=css), è ignorato da alcuni user agent - Jaws, per esempio - e quindi il problema non si pone. Verrà considerato solo il markup html e il titolo sarà perfettamente leggibile nella sua versione testuale, anche se privo di stili. |
The bat! V3The Bat! è un programma di posta elettronica sicuro contro i virus ed efficace
contro lo spam. |