Image replacement: nuove idee per la stampa

Ecco lo scenario: vogliamo realizzare un sito che rispetti gli standard, basato sui CSS, con un bell'header grafico che rappresenti in maniera accattivante il nome e/o il logo del sito, con una marcatura che ci garantisca che successivi redesign e restyling del sito non necessitino di modifiche dell'HTML ma solo del CSS. Vogliamo che il contenuto testuale equivalente resti accessibile a screen reader, browser testuali, dispositivi mobili, a utenti con CSS e/o immagini disabilitate.

La soluzione più pratica e usata è senza dubbio una tecnica di image replacement. Se però oltre a un header grafico a schermo vogliamo una bella immagine che riproduca il logo quando la pagina viene stampata, magari con un set di colori
ridotto o in toni di grigio, ecco che le cose si complicano leggermente...

Infatti, anche se i browser sono in grado di stampare colori e immagini di sfondo, l'opzione di default è disabilitata, percià, nella maggioranza dei casi, una delle tradizionali tecniche di image replacement fallirebbe la prova stampante.

La soluzione più comune e intuitiva è quella di includere nel markup un'immagine attraverso il tag <img> da nascondere a schermo e mostrare per la stampa grazie a due regole CSS specifiche. Ho presentato una soluzione simile un po' di tempo fa in uno dei miei articoli, per la precisione in questa pagina della serie sul template con PHP e CSS.

Un'idea simile è presentata anche su A List Apart nell'articolo High-Resolution Image Printing. Un punto da considerare, soprattutto se si è sostenitori radicali del markup semantico e minimale, è la duplicazione del contenuto: includere sia l'immagine che il suo equivalente testuale nell'header potrebbe essere una soluzione un po' sovradimensionata, dato che le immagini veicolano comunque un contenuto testuale alternativo e perfettamente accessibile attraverso l'attributo alt.

Ecco così alcune idee recenti: CSS logo replacement, in cui l'immagine racchiusa in un link offre uno spunto per l'image replacement a schermo, lasciando l'immagine inclusa nel markup già  pronta per la stampa. Basata su un concetto simile, ma decisamente più accessibile è la recentissima iIR - img Image Replacement.

Da considerare che le immagini nel markup hanno pro e contro: il principale vantaggio è l'abilità  di stampa, ma lo svantaggio è il dover vincolare l'immagine al contenuto. Se da una parte simili tecniche sono innovative in quanto novità , a pensarci bene possono ritenersi anche involutive. L'image replacement è nato per svincolare il contenuto testuale dall'equivalente grafico... ha davvero senso legarli dinuovo per favorire la stampa?

Ci sono dunque alternative? Eccone una: in Printing CSS background images (sort of) Andreas Bovens propone di usare la proprietà  list-style-image, ovvero quella per rendere il marcatore grafico delle liste, che a differenza delle immagini di sfondo viene stampato di default. La compatibilità  è da verificare, ma è uno spunto decisamente notevole per ulteriori sviluppi.

Per concludere una piccolo consiglio pratico: quale che sia la scelta implementativa per avere un header grafico a livello di CSS, è importante racchiudere nel markup il testo e/o l'immagine (con opportuno alt text!) all'interno del tag <h1>, che dà  semanticità  alla pagina e favorisce il posizionamento sui motori di ricerca. Alla prossima.