Este fallo hace referencia a la práctica incorrecta de usar css para incluir imágenes que forman parte del contenido, y que es reflejado en WCAG 2.1 como Fallo 3.
Se aplica a
- Toda tecnología que soporte el uso de código CSS
- Criterio 1.1.1 – Existencia de alternativas textuales
Descripción
- La propiedad CSS “background-image” nos permite incluir imágenes en el documento usando CSS sin que exista referencia alguna en el código HTML.
- La propiedad baclground-image fué diseñada como un método para incorporar imágenes decorativas y no es posible asociar un texto alternativo a las mismas.
- Los textos alternativos son imprescindibles para las personas que no pueden ver las imágenes que contienen información relevante.
- Por tanto, es un fallo de accesibilidad usar esta propiedad para incluir imágenes que contengan información relevante.
- Este fallo se aplica igualmente en casos donde “background-image” es declarado en el atributo “style” de un elemento HTML o inclusive si es creado de forma dinámica desde scripts del lado cliente (ver ejemplo 3 más adelante).
Nota Importante
Incluir información relevante a través del uso de la propiedad “background-image” es también un problema para:
- Personas que precisan usar backgrounds alternativos para incrementar la legibilidad.
- Personas que precisan el uso del modo de alto contraste para percibir el contenido.
Los perfiles de usuario mencionados podrían perer información importante debido a la ausencia de descripción textual alternativa.
Ejemplos
Ejemplo 1
En este ejemplo, parte del contenido está incluido mediante una imagen que solo es cargada mediante css.
En la imagen “TopRate.png” (180x200px), se lee “19.3% APR Typical Variable.”
El contenido del CSS:
p#bestinterest {
padding-left: 200px;
background: transparent url(/images/TopRate.png) no-repeat top left;
}Y es usado en el siguiente bloque HTML:
<p id="bestinterest">
Where else would you find a better interest rate?
</p>Los perfiles afectados, no podrán leer la información mostrada en la imagen debido al fallo.
Ejemplo 2
Un distribuidor de libros usa background-image para proporcionar iconos junto al título de cada libro que indica si son nuevos, ediciones limitadas, y si están o no en stock.
La CSS contiene lo siguiente:
ul#booklist li {
padding-left: 20px;
}
ul#booklist li.new {
background: transparent url(new.png) no-repeat top left;
}
ul#booklist li.limited {
background: transparent url(limited.png) no-repeat top left;
}
ul#booklist li.instock {
background: transparent url(instock.png) no-repeat top left;
}
ul#booklist li.outstock {
background: transparent url(outstock.png) no-repeat top left;
}En el código html se usa del siguietne modo:
<ul id="booklist">
<li class="new">Some book</li>
<li class="instock">Some other book</li>
<li class="limited">A book we desperately want to get rid of</li>
...
<li class="outstock">A book you actually want </li>
</ul>Ejemplo 3
Siguiendo la estela del ejemplo 1, pero en esta ocasión el background-image está definida en el atributo style del código HTML:
<p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;" >
Where else would you find a better interest rate?
<p>En este otro ejemplo, el background-image se crea mediante lenguaje script del lado cliente:
<script type="text/javascript">
var newP = document.createElement('p');
var newPText = document.createTextNode('Where else would you find a better interest rate?');
newP.appendChild(newPText);
newP.style.background = 'transparent url(/images/TopRate.png) no-repeat top left';
document.body.appendChild(newP);
</script> Técnicas Relacionadas
- H37: Usando atributos alt en elementos de tipo imagen
Tests
Describimos a continuación el método propuesto por WCAG para detectar este fallo.
Procedimiento
- Examine todas las imágenes agregadas al contenido mediante CSS, atributo style en HTML o dinámicamente mediante scripts que inyecten imágenes mediante background-image;
- Compruebe que las imágenes añadidas mediante este método no muestran información relevante.
- Si alguna imagen muestra información relevante, compruebe que la información sea proporcionada a las tecnologías de apoyo y que también está disponible cuando las imágenes CSS no están disponibles.
Resultados Esperados
- Si los pasos 2 y 3 no se cumplen apropiadamente, entonces este fallo aplica y el cotnenido falla en el cumplimiento del criterio.