En una micropublicación de Addy Osmani, muestra un pequeño truco para visualizar de forma clara cuando una imagen no tiene alternativa textual (atributo alt):

img:not([alt]){
    border: 5px solid red;
}

De esta manera, veremos un llamativo y grueso borde de 5 pixels rojo en las imágenes que probablemente estén incumpliendo una regla básica de accesibilidad web (tal vez sean decorativas, pero no es lo habitual).

Una alternativa —también propuesta por el mismo autor—, aprovecha una interesante y potente característica de CSS3: la aplicación de filtros en imágenes.

img:not([alt]){
    filter:blur(5px);
}

Y como consecuencia, veremos las imágenes sin alternativa textual desenfocadas.

Más allá del aspecto cómico que pueda tener el mostrar una imagen desenfocada, y dar a entender que no se ha cargado correctamente, creo que en situaciones en los que sea factible incluir imágenes sin textos alternativos —ya sea por los editores encargados de generar contenidos, o el propio software de creación de contenidos—, creo que no viene mal incluirlo en las hojas de estilos utilizadas, aunque sea en entornos previos (desarrollo, pre-producción, QA).

Porque, pasa el tiempo, y todavía tenemos que seguir insistiendo en las ventajas de la accesibilidad web, y la satisfacción del trabajo bien hecho: por los editores y desarrolladores. Pero sobre todo por los usuarios. Por todos.


Por cierto: blog posible comenzó su historia en el lejano año 2005. Estuvo funcionando hasta el 2008, en el que por diversos motivos, decidí aparcar este blog (junto con web es móvil) y empezar de nuevo, con Xposible.

Más tarde, empecé a utilizar tumblr (¿cómo se pronuncia?) haciendo blogs temáticos, en los que básicamente, incluía enlaces (lo contaba en asuntos varios y ahí puedes encontrar los enlaces).

Hoy, casi doce años después de la última publicación, vuelvo a escribir de nuevo aquí.

Probablemente este blog se nutra de esos enlaces y recursos pero utilizando y revitalizando webposible.  Mientras muchos blogs de aquella época, continúan en estado zombie o directamente han desaparecido, yo vuelvo tras un descanso de casi doce años. Cuento contigo.

2 commentarios en “Detectando imágenes sin alt mediante CSS

  • Manu

    Mira que me ha hecho ilusión ver una entrada de este blog en mi feed!

    Suerte en la nueva etapa.

  • Gonzalo

    Ja ja. Sí que has tenido paciencia. ¡Y un lector de feeds!
    Un abrazo, Manu.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *