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 ususaris, 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 d'un senzill exemple:
- Obriu l'arxiu fir.html
- L'element que se substituirà per una imatge correspon a la capçalera de primer nivell:
<h1>Lorem Ipsum</h1>
- A aquesta capçalera se li ha afegit un identificador (
id) únic com a atribut de valorfir:<h1 id="fir">Lorem Ipsum</h1>
L'ús de l'atributidpermetrà treballar exclussivament amb aquest element, sense que afecti a la resta de capçaleres de primer nivell del document. - S'ha afegit una nova etiqueta a l'element capçalera, l'etiqueta buida
<span>, que agrupa el contingut d'aquesta:<h1 id="fir"><span>Lorem Ipsum</span></h1>
- 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:#fir span { display: none; }Aquesta regla farà desaparèixer el text de la finestra del navegador. Només es recuperarà el text si es desactiva l'estil. - Per poder completar el procés cal crear la imatge que es vol que substitueixi al text, amb un editor gràfic, com pot ser el GIMP. La imatge creada per aquesta pràctica accentua la diferència entre l'ús d'una família de fonts comú i una tipografia que estat manipulada amb l'editor gràfic (fir.png).
- 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:#fir { background-image: url(fir.png); width: 330px; height: 80px; } - Podeu veure el resultat obrint l'arxiu: fir_1.html.
Vista de l'arxiu fir_1.html
Encara que el codi que s'ha fet servir en aquesta pràctica és molt senzill, no està totalment exempt de problemes. La utilització de la propietat display: none fa desaparèixer el text dels navegadors, com ja s'ha dit abans, però no és reconeixible pels lectors de pantalla, que no llegiran el text de <h2>.
Un altre desavantatge és que s'afegeix un element que no té valor semàntic i només afegeix codi buit a l'estructura del document. S'està fent referència a l'etiqueta <span>, que com ja es va veure a la pràctica 1 del mòdul 2, no aporta cap significat al document.
I, per últim, si el navegador té deshabilitada la càrrega d'imatges, no apareixeran, ni la imatge, ni el text que la substitueix.
És important, doncs, considerar els avantatges i desavantatges de l'ús d'aquesta i altres tècniques que no acaben de ser perfectes. Diferents autors aconsellen utilizar amb precaució les tècniques de substitució de text per imatges, pensant sempre en termes d'accessiblitat del document. De moment, la cerca de la regla perfecta, aquella que equilibri el disseny i l'accesibilitat, segueix oberta.
