CASI: Quando l'immagine va a sostituire il testo.

karedas

CASI: Quando l'immagine va a sostituire il testo.

Salve a tutti ho un dubbio ^^
Innanzitutto parto in quarta dicendo che avrei bisogno di una risposta che si adegui alle mie necessità verso l'accessibilità =p

Il caso
Vi sarà di certo capitato o nel vostro lavoro o su un sito che spesso, un h1 - h2 - h3 - uno spam o comunque uno del genere, venga visualizzato tramite un'immagine anzichè del testo vero e proprio.
Solitamente questo succede perchè si vuol mostrare senza problemi del testo con un carattere "non-standard" o perchè magari lo si è creato dandogli un certo effetto grafico che l'html e il css non possono riproporre.

Cosa si fa quindi? Semplice si inserisce come immagine o background la nostra bella immaginetta disegnata su photoshop o chi per loro.

**Come agisco io:
**Per mantenere del testo visualizzabile anche senza i fogli di stile inserisco un elemento "Hn" , gli do una classe "Hide" (cioè creo una classe con questo nome e gli attribuisco 'display:hidden;') e aggiungo subito dopo la mia immagine.
**Nel dettaglio

**```
.hide{
visibility:hidden;
}

[html]<h4 class="hide">ABC prova del mio testo</h4>
<img src="nomeimmagineABC.jpg" alt="ABC titolo" />[/html]**Accessibilità?
**Il mio dubbio è che ciò non sia accessibile.
Quando rimuovo il foglio di stile a video mi compaiono praticamente due elementi della solita utilità e incolonnati nella solita posizione solo che uno è del testo vero e proprio e l'altra è l'immagine dove però c'è scritta la solita ed identica cosa. (spero mi abbiate capito).


**Suggerimenti?
**

karedas

Ah ecco aggiungo:
Agisco anche così solo ho sempre il forte dubbio che non sia accessibile:

laburno

Ciao karedas,
se cerci image replacement trovi una serie di post interessanti sul forum di CSS.

L'accessibilità non ne viene intaccata perché queste tecniche nascondono il testo ai browser grafici ma non, ad esempio, a quelli audio. Inoltre a stile disabilitato il contenuto è ancora fruibile.

Non ricordo invece quale tra visibility:hidden e display:hidden avesse problemi coi browser per non vedenti.

Un articolo su tutti:
http://css.html.it/articoli/leggi/2030/image-replacement-le-3-tecniche-migliori/

karedas

Si quell'articolo l'avevo gia letto. A mio parere l'unico che può però essere preso in considerazione è il secondo esempio. Il primo ha un aspetto disordinato, mettere uno spam vuoto così pare un uso sconsiderato di questo tag.
Il terzo caso è scomodo.
Devo per forza lasciare un padding per lasciare che il testo presente possa esserci senza che si vada a sovrapporre alla mia immagine. Se passo il mouse sopra per evidenziare il contenuto questo appare e non è una bella cosa parlando graficamente.

Il secondo caso è il migliore.
Non vi è un uso diciamo confunsionario dei tag. L'unica è che devi scrivere fin troppe righe di css ma non si può avere tutto ^^

laburno

Che intendi per "uso sconsiderato" del tag span?

karedas

Lo span solitamente viene usato per modificare o dare un certo effetto ad una porzione di testo. Usare uno span vuoto senza inserirci nient'altro che un'immagine non ha senso a mio parere.

giacomo79

@karedas said:

**Suggerimenti?
**
Prova a navigare il sito con un browser testuale tipo lynx.

karedas

Sinceramente non ho capito che suggerimento è lol.
Che c'entra Lynx cn quello che ho chiesto ? =D
comunque ho risolto