Estilos>>Técnicas
En algún momento a lo largo del curso hemos indicado la psibilidad de sustituir algún texto por imágenes. En una ocasión se sugirió como forma de preservar el diseño que habíamos creado para un título y en otra para ocultar una dirección de correo a los rastreadores pero hacerla visible a los visitantes.
Si consideras este último motivo es posible que se te ocurra pensar que los lectores de páginas para personas con deficiencia visual hacen algo muy similar a lo que hacen los rastreadores de direcciones: ir leyendo el texto que aparece en el código fuente. Así que, si en el código fuente no hay ningún texto...estaremos haciendo que ese fragmento de página no exista para el lector y, por tanto, para el visitante con problemas de visión que está visitando la página.
Este es el gran problema de la sustitución de imágenes: la accesibilidad. Hay multitud de técnicas de susitución de imágenes publicadas en la web para obtener un diseño visual rico (suelen recibir el nombre IR por el inglés Image Replacement). Nunguna de ellas es perfecta y todas adolecen de alguna dificultad. La que vamos a ver ahora, que utilizaremos para crear la cabecera de un periódico, es accesible pero puede provocar problemas con la indización en algunos buscadores.
Empecemos por comprobar el efecto y luego vemos la idea y la forma de traducirla al código CSS necesario.
El resultado se apoya en las siguientes ideas:
p,
div, h1, h2,
...) y
utilizaremos una imagen sin repetir que mostrará el texto
como fondo del elemento.<span> en la
que aparecerá el
contenido que hay que leer. Con esto conseguimos también que
los usuarios puedan ver el texto incluso si desactivan los estilos.
<style type="text/css">
#cabecera {
background-image:
url(imagenes/andoenredando.png);
background-repeat: no-repeat;
width: 685px;
height: 62px;
margin-left: auto;
margin-right: auto;
}
<!-- Recuerda
que los márgenes automáticos para el
centrado no funcionan en Internet
Explorer sin un parche -->
#subcabecera {
background-image:
url(imagenes/andoenredando2.png);
background-repeat: no-repeat;
width: 375px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
/* Ahora el desplazamiento para
sacar el texto de la pantalla */
span.oculta {
position: relative;
left: -5000px;
}
</style>
Y ahora el código HTML
<h1 title="ando.enred.ando" id="cabecera">
<span
class="oculta">ando.enred.ando</span>
</h1>
<h2 id="subcabecera" title=title="Periódico
escolar del CEIP "Colenet"">
<span
class="oculta">Periódico escolar del CEIP
"Colenet"</span>
</h2>
Para aumentar aún más la accesibilidad
se han
añadido atributos title, de forma
que un usuario que no
tuviera
desactivada la utilización de CSS pero sí la
carga de
imágenes, contara con una referencia de lo que hay en el
hueco
que deja el elemento que no está viendo