Cos’è l’image replacement e le sue differenti implementazioni
NB Tema ispirato dall’ultimo articolo di WDW: Fonts and the Web
Image Replacement, letteralmente la “sostituzione tramite immagini” di un testo.
Ma andiamo nel dettaglio. Vi sarà sicuramente capitato di dover usare un font caratteristico e non cross-browser, cioè non presente uniformemente in tutti i sistemi (forse dovremmo dire cross-system? 
) Comunque sia. Nessuno vieta di usare, per un titolo o addirittura per parti di testo, un’immagine che riporti il testo con il font prescelto. Per motivi però sia di accessibilità sia di seo dobbiamo necessariamente riportare lo stesso testo scritto nell’immagine anche come testo selezionabile e visibile sia dagli screen reader e sia dai motori di ricerca, quindi dagli utenti ciechi (e come sappiamo Google è il primo utente cieco che dobbiamo aiutare).
Come fare? Beh, se usassimo l’immagine direttamente nell’html potremmo usare l’alternative text (alt) e il title per descrivere ciò che è scritto nell’immagine-testo, ma ai motori di ricerca ciò non piace, perchè il testo alternativo permette l’indicizzazione dell’immagine e non dei contenuti. E nemmeno poi tanto agli screen reader, perchè si va a compiere un’operazione di “lettura di un’immagine”, che volendo (credo) si può anche saltare, comportando così perdite di tempo e di lettura di effettivi contenuti o menu, o titoli.
Allora usiamo la tecnica dell’image replacement. Ossia sosituiamo tramite i css (o altre tecniche raffinate che vi segnaleremo) i testi con le immagini che vogliamo effettivamente mostrare.
Le tecniche sono differenti, ciascuna con i suoi pro e i suoi contro. Vi riporto un articolo di Webdesignerwall che ne parla approfonditamente, e ditemi: voi quale usate? Io per Iwd ho usato il sistema dei livelli sovrapposti, ma come potete vedere non funziona il link, come ovviare? Sono apprezzati consigli e suggerimenti.
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
12 Commenti
Io su questo sito ho usato il text-indent, che mi permette di inserire anche i link. Il problema è che “disattivando” solo le immagini (ma continuando a usare il foglio di stile) le scritte non si vedono…”disattivando” anche il foglio di stile le scritte (e quindi navigando in “puro” testo) invece si vedono.
@giovanni : utilizzando Jquery puoi fare in modo che a immagini disabilitate si vedano nuovamente le scritte, a patto che sia abilitato almeno il Javascript ovviamente
text-indent tutta la vita! chi usa un browser per diversamente abili è difficile che disabiliti solo le immagini..e cmq nel caso ottimo il consiglio di Michy
…percaso il titolo è sbagliato?!?
eheh grazie ho corretto il titolo e il permalink
@adedip: in effetti non parlavo di diversamente abili, mi riferivo ai casi in cui vengono volontariamente disabilitate soltanto le immagini, magari per una ridotta velocità di connessione…
@lauryn: per far funzionare il link potresti provare a inserire lo span dentro
lasciandogli z-index : -1e l’immagine di sfondo assegnarla ad
dandogli dimensioni uguali ad h1 e display:blockHo fatto una prova veloce e mi sembra che funzioni
Italian Webdesign
grazie micky! ora lo provo
risolto, con qualche piccolo accorgimento ma ce l’ho fatta. grazie!!
bene
Io mi trovo molto bene con la cover-up span, crea uno span vuoto ma non richiede hack ed è accessibile, credo anche con gli screen reader ma non ne sono sicuro.
Mi piacerebbe testare il mio sito su uno scrren reader ho provato con jaws la versione demo ma è fastidioso dover resettare ogni volta il pc dopo averlo usato per 60min.
Stavo provando a fare un css apposito per screen reader avete qualche suggerimento?
La versione per gli screen reader la realizzi con un buon Mark-up. Non hai bisogno di un css apposito.