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 */
}