Cuando uno empieza a hacer páginas web accesibles, empiezan a surgir algunas preguntas cuya respuesta no es tan sencilla.
¿Cómo centrar una imagen usando CSS?
Existen muchas formas de hacerlo, pero la que me parece la más sencilla es la que proponen en este post del blog lamateporunyogur.
En la hoja de estilo, debemos crear una clase para cada alineación de imagen.
Por ejemplo, para imágenes centradas, en el CSS podemos escribir esto:
img.centrado {
display: block;
margin: auto;
}
Y en el archivo HTML tendremos que escribir, cada vez que ponemos una imagen:
<img class=’centrado’ src=’archivo de imagen’ alt=’texto alternativo’>
¿Cómo usar imágenes de fondo para escribir sobre ellas?
Muchas veces queremos incluir una imagen en nuestra página, pero no porque tenga una foto o un dibujo interesante sino porque queremos escribir dentro de ella, como en estos ejemplos:
Lo que se hizo en los tres casos es exactamente lo mismo:
-En la hoja de estilo se creó una clase cuyo fondo tiene la imagen, y al texto se le alteraron los tamaños (altura/height, ancho/width) y la alineación para que coincidan con el centro de la imagen:
p.comentario {
height: 5.5em;
width: 7.3em;
text-align: center;
vertical-align: middle;
line-height: 5.5em;
color: #ffffff;
background-image: URL(‘nube.jpg’);
}
-En el archivo HTML simplemente se usó la clase “comentario” para escribir un pequeño texto:
<p class=”comentario”>¡Hola!</p>
No debemos olvidar nunca que las imágenes que están en el archivo HTML tienen que tener un texto alternativo que la reemplace en su función (por ejemplo, si la imagen tiene un enlace, el texto alternativo debe decir “ir a tal dirección”), y una descripción larga (longdesc=”archivo.html”) en caso de tratarse de una imagen que contenga información. En cambio, cuando una imagen no transmite información, podemos ponerla como fondo de un DIV.
Otros posts de BETA Weblog sobre accesibilidad y CSS:
¿Cómo se ve mi sitio en otros sistemas?
Sombras nada más… o ¿sombras en el texto de una web accesible?
Ayuda para crear hojas de estilo
Cómo saber el código de un color
Cómo saber si tu sitio es accesible
2 opiniones en “Imágenes en CSS”