Accesibilidad Web #2 – Atributo alt para las imágenes background CSS

Cuando utilizamos la etiqueta <img>, está claro que podemos mostrar a través de su atributo alt lo que la imagen quiere informar. Pero, ¿se puede hacer algo cuando la imagen esta puesta como background?

De todas formas, si la imagen es de tipo informativo, ¿tendría sentido que fuera un background? Este post viene a ser mas bien una duda que una recomendación.

Resumiendo cuando se muestra una imagen se puede hacer:

  • Utilizando la etiqueta <img>, <img src=”/ruta/a/la/imagen.jpg” alt=”La salida de incendios se encuentra al fondo del pasillo.”>
  • Utilizando CSS: background-image: url(‘/ruta/a/la/imagen.jpg’) no-repeat;

La duda es si se podrían utilizar los atributos ARIA para seguir dando soporte en accesibilidad sin renunciar, por ejemplo, a que una imagen sea responsive por CSS.

<div class="imgResponsive" role="img" aria-label="la salida de incendios se encuentra al fondo del pasillo.">
   <!-- contenido -->
</div>

Aunque quizá tambien se podría realizar lo siguiente:

<div class="imgResponsive">

<p class="visualmenteOculto">La salida de incendios se encuentra al fondo del pasillo.</p>

</div>

Donde la class visualmenteOculto es una clase que oculta su contenido visualmente pero no a los lectores de pantalla.

Se agradecerían sugerencias.

Accesibilidad Web #2 – Atributo alt para las imágenes background CSS

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s