pevere web css design accessibilità e usabilità 

Tecniche di sostituzione delle immagini in CSS

Molto spesso vengono usate tecniche per sostituire i testi contenuti nei tag H con immagini. Per prima regola ricordiamoci di inserire altezza e larghezza dell’immagine altrimenti, essendo probabilmente il box dell’H1 per esempio, più piccolo, l’immagine verrebbe tagliata.

H1 {
	background: transparent url(mia_immagine.jpg)
	 left no-repeat;
	width: 450px;
	height: 20px;
}

Una prima tecnica spesso usata è quella di sostituire i titoli con delle immagini. Per fare questo è sufficiente racchiudere il testo con un tag span e poi applicare l’immagine all’elemento. Questa soluzione, anche se molto usata è inaccessibile agli screen reader pertanto un cieco non potrà leggere il nostro titolo.

<h1 id=”intestazione”><span>Questo è il mio sito</span>
</h1>

#intestazione {
	background: url(titolo.jpg) top left 
		no-repeat;
	width: 500px;
	height: 30px;
}

#intestazione span {
	dispaly: none;
}

Per rendere accessibile il nostro codice, potremmo utilizzare una sintassi di questo tipo, anche se
però, come spesso succede alcuni browser mal supportano l'overflow.

<h1 id=”intestazione”> Questo è il mio sito</h1>

#intestazione {
	padding: 25px 0 0 0;
	overflow: hidden;
	background: transparent url(immagine.jpg) 
		no-repeat;
	height: 0 !important;
	height /**/:25px;
}

Nel tempo, sono state pubblicate diverse soluzioni grazie alla sperimentazione ed all'intuito di alcuni abili designer. Ecco alcuni esempi:

Soluzione di Mike Rundle.
Questa soluzione utilizza il comando text-indent con un valore negativo, in modo da spingere il testo fuori dallo schermo. Nonostante possa sembrare una soluzione molto elegante, ci sono comunque problemi di compatibilità con Explorer nella versione 5 e precedenti.

<h1 id="intestazione">Questo è il mio titolo</h1>

#intestazione {
	text-indent: -100000px;
	background: transparent url(mia_foto.jpg) 
		no repeat;
	height: 25px;
}

Soluzione di Alexander Levin.
Questa soluzione prevede l’uso di span, ma senza metterci all’interno il teso. Lo span serve per caricare una immagine e con una azione di replace, metterla sopra il testo. E’ una tecnica un po’ laboriosa e poco ortodossa, ma rispetta perfettamente le regole di accessibilità anche per quanto riguarda i CSS attivi, con la disattivazione delle immagini. Inoltre questa soluzione è accessibile anche agli screen reader.

<h1 class="sostituisci" id="h1_pers">Questo è il mio 
		titolo<span></span></h1>


.sostituisci {
	position: relative;
	margin: 0;
	padding: 0;
	/*nascondi l'overflow per i browser da 
		Explorer 5/mac */
	overflow:hidden;
	/**/
}

.sostituisci span {
	display: block;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 1; /*accorgimento per Opera 5 e 6*/
}


#h1_pers, #h1_pers span {
	width: 400px;
	height: 20px;
	background: transparent url(mia_foto.jpg) top 
		left no-repeat;
}

Aggiungi il Tuo Commento:





Inviando questa risposta dichiaro di aver letto ed approvato le condizioni di utilizzo di questo sito web.

(*) = campo obbligatorio.

Condizioni di Utilizzo

1 - Tutte le risposte inviate a questo sito saranno sottoposte a moderazione manuale da parte dell'amministratore al fine di evitare il fenomeno detto "SPAM".

2 - Tutti i dati inseriti nel modulo di risposta verranno pubblicati in questa pagina ad eccezione dell'e-mail. Tale informazione viene richiesta ed archiviata dagli amministratori al fine di scoraggiare un utilizzo non consono del blog.

3 - Non utilizzare le risposte per pubblicizzare il tuo sito web. Tale tentativo verrà cancellato dall'amministratore. In ogni caso ai link inseriti nelle risposte viene applicato il "nofollow" per cui non ti portano vantaggi.