mercoledì 10 ottobre 2007

La Fahrner Image Replacement

Tutte le tecniche di Image Replacement hanno lo scopo di "nascondere" visivamente una porzione di testo e di mostrare al suo posto un'immagine che viene indicata attraverso la proprietà background del css.

La Fahrner Image Replacement (FIR), abbastanza "datata" ma buona, attribuisce un background al tag h1 (o qualsiasi altro tag di titolazione) modificando la proprietà display e dichiarando che lo span dell'header non deve essere mostrato visivamente.


#pageHeader h1 span {
display: none
}


Purtroppo la FIR fa a pugni con l'accessibilità, se si considerano quelle fasce di utenti diversamente abili che utilizzano uno screen reader per "vedere" una pagina web. Lo screen reader con un display:none non legge il contenuto testuale relativo.
Ma esiste un hack. Eccolo.


h1 span{
display: block;
width: 0; height: 0; line-height: 0; /* attribuisce dimensioni nulle */
overflow: hidden; clip: rect(0,0,0,0); /* nasconde il testo */
}

2 commenti:

Michele Gerarduzzi ha detto...

Ti segnalo anche questo articolo che riassume pregi e difetti di tutte le principali tecniche di image replacement. Personalmente utilizzo da molto tempo il Phark Method, che non richiede nessun tag extra non semantico.

Marina ha detto...

Good words.