Fallo en el cumplimiento del criterio 1.1.1 debido al uso de CSS para incluir imágenes que muestran información relevante. [Fallo 3 – WCAG 2.1] (Accesibilidad Web 56)

---

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

1. 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.
2. 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.
3. Los textos alternativos son imprescindibles para las personas que no pueden ver las imágenes que contienen información relevante.
4. Por tanto, es un fallo de accesibilidad usar esta propiedad para incluir imágenes que contengan información relevante.
5. 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

1. 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;
2. Compruebe que las imágenes añadidas mediante este método no muestran información relevante.
3. 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.

Bibliografía

• Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
• WCAG 2.1 – Text Alternatives
• Guía de Validación de Accesibilidad del del Observatorio de Accesibilidad

---