Mètode de reemplaçament d'imatges revisat (RIR)

Publicat el 25/04/2004

El mètode FIR per substituir un text per una imatge via CSS explicat originalment a stop design s'ha demostrat que no és accessible per lectors de pantalla tipus JAWS ja que aquests no llegeixen el text que estigui ocult a través de l'atribut display.

Dave Shea fa un recull de tècniques RIR.

De totes les que exposa, la que m'ha agradat més és el mètode Leahy/Langridge perquè no necessita afegir cap element extra, d'aquesta manera puc garantir la semàntica.

mètode Leahy/Langridge


<h1>
   Reemplaçament d'Imatges Revisat
</h1>


h1 {
   height: 0px !important;
   overflow: hidden;
   background-image: url(../images/logo_positiu.png);
   background-repeat: no-repeat;
   padding: 60px 0 0 0;
   margin: 0;
   height /**/: 30px;
}

Com a exemple, el logotip d'aquesta web.

Nota1: S'ha de tenir present que l'element tractat per fer el RIR ha de ser una caixa de bloc. Si no ho fós (el cas d'un enllaç) se l'ha de convertir amb un display: block;

Nota2:La tècnica RIR presenta un problema quan no es carreguen les imatges però si que es carrega el CSS.

Suport dels navegadors
Navegador Windows Mac Linux
Si ho proveu en algun navegador que no estigui aquí llistat us agrairia que m'informessiu del resultat
Mozilla Firefox 0.8 Si Si Si
Mozilla 1.6 Si Si Si
Opera 7.23 Si ? ?
Safari 1.2 - Si -
Camino 0.7 - Si -
Konqueror 3.2 - - Si
Konqueror 3.1 - - No
Internet Explorer 6 Si - -
Internet Explorer 5.5 Si - -
Internet Explorer 5.01 Si - -

Comentaris

Afegir un comentari