Entre el disseny i l'accessibilitat: reemplaçar text per imatges
Un dels tòpics del diseny web actual, barreja d'equilibri entre el disseny i l'accesibilitat, és la pràctica de reemplaçar text per una imatge, augmentant així el grau de personalització del disseny i presentació de la pàgina web, al deixar de dependre de les limitacions de les fonts instal·lades als sistemes dels usuaris, però sense oblidar l'accessiblitat, contemplant la posiblitat que els dispossitius no puguin representar o llegir les imatges del document.
Actualment existeixen diferents tècniques que permeten intercanviar el text per imatges sense alterar l'estructura i la semàntica del document. Aquest fet es dóna perquè aquests canvis es limiten al terreny de la presentació, és a dir, al CSS. Aquests mètodes funcionen correctament en diferents navegadors, però fallen en general al passar per un software assistit, com és el cas d'un lector de pantalla.
Un espai on es poden veure nombrosos exemples d'intercanvi de text per imatges és CSS Zen Garden, on les diferents seccions i subseccions del document han estat reemplaçades per imatges i, per tant, han augmentat el seu nivell estètic.
De les diferents tècniques que es poden utilitzar per l'intercanvi de text per imatges, es veurà el mètode FIR, que deu el nom al seu autor, Todd Fahrner: Fahrner Image Replacament. La tècnica FIR se serveix de la propietat background o background-image.
Veieu el seu funcionament a travès del reemplaçament del logotip de l'exemple de lloc web que heu treballat fins ara.
- Obriu l'arxiu index.html del lloc web
- Afegiu una nova etiqueta a l'element capçalera, l'etiqueta buida , que agrupa el contingut d'aquesta:
<code html><h1>Bloc net</h1></code> - Ja s'ha definit, doncs, l'estructura necessària que s'associarà a les regles d'estil que permetran intercanviar el text per la imatge. En primer lloc, s'ocultarà el text utilitzant la propietat display: none; que afectarà només al contingut tancat per l'etiqueta <span>, és a dir, el text a reemplaçar:
<code css> h1 span { display: none; } </code>
Aquesta regla farà desaparèixer el text de la finestra del navegador. Només es recuperarà el text si es desactiva l'estil. - Per últim només cal afegir la imatge com a fons de l'element h1, i redimensionar la seva caixa en funció de l'amplada i alçada de la caixa:
<code css> h1 { background-image: url(../imatges/logotip.png); width: 261px; height: 59px; position: relative; top: 36.5px; } </code> Descarregeu el nou fixter per comprovar els canvis: Lloc web amb FIR ===== La tècnica sIFR ===== Una altra tècnica -més sofisticada- és la de sIFR o escalable Inman Flash Replacament. Aquesta tècnica reemplaça el text per un objecte Flash. Té l'avantatge que, en cas que el navegador tingui deshabilitat la càrrega d'objectes Flash o codi Javascript, apareix el text de l'HTML. En canvi, comporta una realització complexa. Per a més informació: * http://www.mikeindustries.com/blog/sifr/ * http://wiki.novemberborn.net/sifr/