posted on
Monday, May 08, 2006 9:34 AM
Certo a tutti sarà capitato di dover affrontare il problema di avere un logo, o una immagine che sostituisce una titolatura, che sia essa un H1 o un H2.
Come farlo in modo responsabile?
Dave Shea, co-autore di "Lo zen e il design CSS", ha tenuto una traccia delle varie soluzioni proposte in un articolo intitolato "Revised Image Replacement": dal "display:none" di Todd Fahrner, conosciuta anche come tecnica FIR, dal nome del primo che l'ha proposta, alle sue varianti e altre soluzioni proposte.
Joe Clark raccolse commenti e testing del FIR in "Facts and Opinion About Fahrner Image Replacement".
Personalmente ho utilizzato la versione proposta da Mike Rundle (text-indent), che però ha come limite di non supportare IE 5.0. Con questo browser l'immagine viene spinta fuori dallo schermo insieme al testo.
#header{
text-indent:-5000px;
background-image:url(immagine.gif) no-repeat;
height:40px;
}
<h2>Titolo</h2>
Perchè dare importanza alla presenza in pagina di titolature che siano rintracciabili e chiare in quanto tali?
Invece di mettere un cappello a questo post, inserirò un footer, un promemoria sulla semantica.
E' importante scrivere codice che sia univocamente interpretabile, sia dal motore di rendering, sia da uno screenreader, se stiamo sviluppando un sito accessibile, e soprattutto dagli spider dei motori di ricerca. Scrivere scegliendo il markup più adeguato per il contenuto che stiamo trasmettendo, sicuramente è la scelta giusta.
Credo che chi legga questo post sappia di cosa sto parlando, perchè tanto si è detto in questi anni, ma se aveste qualche dubbio, rimando a questo articolo, "Sviluppare con gli Standard del Web", datato 2004, ma che sicuramente da una vasta e completa panoramica, per di più tradotta in italiano (pigroni!!)