Cos'è l'image replacement e le sue differenti implementazioni

NB Tema ispirato dall’ultimo articolo di WDW: Fonts and the Web

gilder-levin

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Scarica la miniguida "Creare il proprio logo"
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
Guide to Million Dollar Success
My Website
Per chi inizia a muoversi nel web
Scarica la miniguida "Creare il proprio logo"
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
My Website
Per chi inizia a muoversi nel web
%d blogger hanno fatto clic su Mi Piace per questo: