C9Poner las imágenes decorativas con CSS

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) anuncia las imágenes del HTML. Si son adornos, solo añaden ruido y hacen la lectura más lenta.

Además, quien desactiva los estilos o usa un modo de alto contraste deja de ver esos fondos. Así no estorban a la lectura ni bajan el contraste del texto.

Cómo se hace

1. Decida si cada imagen aporta información. Si se quita, ¿se pierde algo? Si no se pierde nada, es decorativa.
2. Ponga las decorativas con background-image, con list-style-image o con content en ::before y ::after.
3. No use esta técnica para logotipos, gráficos, iconos de botón o fotos de producto. Esas imágenes van en el HTML con texto alternativo.
4. Asegure que el texto tiene buen contraste sobre el fondo. Puede añadir un color de fondo sólido de respaldo.

Cómo comprobarlo

1. Identifique las imágenes puramente decorativas de la página.
2. Inspecciónelas con las herramientas del navegador (F12). Deben venir del CSS, no de un <img>.
3. Revise también lo contrario: ninguna imagen con información debe estar puesta solo con CSS.

Ejemplo

Cabecera de una página con una textura de fondo puesta desde el CSS.

.cabecera {
  background-color: #1a3a5c;
  background-image: url("/img/textura-olas.png");
  background-repeat: repeat-x;
  color: #ffffff;
}