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.
