Técnica CSS WCAG 2.2
C9Usar CSS para incluir imágenes decorativas
En resumen
Esta técnica propone insertar las imágenes puramente decorativas o de maquetación (fondos, adornos, efectos al pasar el ratón) mediante CSS, con propiedades como background-image o list-style-image, en lugar de con elementos img en el HTML. De este modo las tecnologías de asistencia las ignoran sin necesidad de marcado adicional y desaparecen limpiamente si el usuario desactiva los estilos o usa alto contraste. No es válida para imágenes que transmitan información.
Aplicabilidad
Cualquier tecnología que pueda usar CSS para incluir imágenes.
Descripción
El objetivo de esta técnica es proporcionar un mecanismo para añadir al contenido web imágenes puramente decorativas e imágenes usadas para el formato visual sin necesidad de marcado adicional dentro del contenido. Esto hace posible que las tecnologías de asistencia ignoren el contenido no textual. Algunos agentes de usuario pueden ignorar o desactivar el CSS a petición del usuario, de modo que las imágenes de fondo incluidas con CSS simplemente «desaparecen» y no interfieren con ajustes de presentación como las fuentes ampliadas o los ajustes de alto contraste.
Las imágenes de fondo pueden incluirse con las siguientes propiedades CSS:
background;background-image;content, combinada con los pseudoelementos::beforey::after;list-style-image.
Esta técnica no es adecuada para ninguna imagen que transmita información o proporcione funcionalidad, ni para ninguna imagen destinada principalmente a crear una experiencia sensorial específica.
Ejemplos
Imagen de fondo para una página HTML
La hoja de estilos de una página web especifica una imagen de fondo para toda la página.
<style>
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>Imagen de fondo con CSS para efectos de imagen al pasar el puntero
La hoja de estilos de una página web usa la propiedad CSS background para crear un efecto decorativo cuando el usuario pasa el puntero del ratón sobre un enlace.
a:hover {
background: #ffe url('/images/hover.gif') repeat;
color: #000;
text-decoration: none;
}Pruebas
Procedimiento
- Comprobar si hay imágenes decorativas.
- Comprobar que se incluyen con CSS.
Resultados esperados
- Si la comprobación n.º 1 es verdadera, entonces la comprobación n.º 2 es verdadera.
Recursos
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica C9 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
