C18Usar margin y padding de CSS en lugar de imágenes espaciadoras

Por qué es importante

Una imagen espaciadora no muestra nada, pero sigue siendo una imagen. Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) la detecta. Si no tiene el texto alternativo vacío, el lector de pantalla puede anunciarla como «imagen» o leer el nombre del archivo, como «spacer.gif».

Además, estas imágenes fijan el espacio en píxeles. Cuando alguien amplía el texto, la separación no se adapta y la maquetación se descuadra.

Cómo se hace

1. Elimine las imágenes que solo sirven para dejar hueco, como <img src="blanco.gif" width="20">.
2. Use margin para dejar espacio por fuera de un elemento. Por ejemplo, para separar dos bloques de noticias.
3. Use padding para dejar espacio por dentro. Por ejemplo, entre el borde de una celda y su texto.
4. Para sangrar un párrafo, use margin-left o text-indent, no una imagen delante del texto.
5. Si por algún motivo queda una imagen decorativa, póngale alt="" para que el lector de pantalla la ignore.

Cómo comprobarlo

1. Abra las herramientas del navegador (tecla F12) y busque elementos img muy pequeños o transparentes.
2. Revise si alguna imagen sirve solo para separar o sangrar contenido.
3. Compruebe que los espacios de la página se crean con margin o padding en la hoja de estilos.
4. Recorra la página con un lector de pantalla. No debe anunciar imágenes vacías ni nombres de archivo.

Ejemplo

Tabla de horarios separada del resto y con aire en sus celdas, sin ninguna imagen espaciadora.

<style>
  table.horario { margin: 1.5em 0; }
  table.horario td, table.horario th { padding: 0.5em 1em; }
</style>
<table class="horario">
  <tr><th>Día</th><th>Horario</th></tr>
  <tr><td>Lunes</td><td>9:00 a 14:00</td></tr>
</table>