{"id":491,"date":"2020-02-06T08:00:24","date_gmt":"2020-02-06T07:00:24","guid":{"rendered":"http:\/\/www.webposible.com\/blog\/?p=491"},"modified":"2020-02-06T16:11:04","modified_gmt":"2020-02-06T15:11:04","slug":"detectando-imagenes-sin-alt-mediante-css","status":"publish","type":"post","link":"http:\/\/www.webposible.com\/blog\/2020\/detectando-imagenes-sin-alt-mediante-css\/","title":{"rendered":"Detectando im\u00e1genes sin alt mediante CSS"},"content":{"rendered":"

En una micropublicaci\u00f3n de Addy Osmani<\/a>, muestra un peque\u00f1o truco para visualizar de forma clara cuando una imagen no tiene alternativa textual (atributo alt<\/code>):<\/p>\n

img:not([alt]){\r\n    border: 5px solid red;\r\n}<\/code><\/pre>\n
De esta manera, veremos un llamativo y grueso borde de 5 pixels<\/span> rojo en las im\u00e1genes que probablemente est\u00e9n incumpliendo una regla b\u00e1sica de accesibilidad web (tal vez sean decorativas, pero no es lo habitual).<\/p>\n
Una alternativa \u2014tambi\u00e9n propuesta por el mismo autor\u2014, aprovecha una interesante y potente caracter\u00edstica de CSS3: la aplicaci\u00f3n de filtros en im\u00e1genes.<\/p>\n
img:not([alt]){\r\n    filter:blur(5px);\r\n}<\/code><\/pre>\n
Y como consecuencia, veremos las im\u00e1genes sin alternativa textual desenfocadas.<\/p>\n
M\u00e1s all\u00e1 del aspecto c\u00f3mico 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\u00e1genes sin textos alternativos \u2014ya sea por los editores<\/strong> encargados de generar contenidos, o el propio software<\/span> de creaci\u00f3n de contenidos<\/strong>\u2014, creo que no viene mal incluirlo en las hojas de estilos<\/strong> utilizadas, aunque sea en entornos previos<\/strong> (desarrollo, pre-producci\u00f3n, QA<\/abbr>).<\/p>\n
Porque, pasa el tiempo, y todav\u00eda tenemos que seguir insistiendo en las ventajas de la accesibilidad web, y la satisfacci\u00f3n del trabajo bien hecho: por los editores y desarrolladores. Pero sobre todo por los usuarios. Por todos.<\/strong><\/p>\n
\n
Por cierto: blog posible<\/a> comenz\u00f3 su historia en el lejano a\u00f1o 2005. Estuvo funcionando hasta el 2008, en el que por diversos motivos, decid\u00ed aparcar este blog (junto con web es m\u00f3vil<\/a>) y empezar de nuevo, con Xposible<\/a>.<\/p>\n
M\u00e1s tarde, empec\u00e9 a utilizar tumblr<\/span> (\u00bfc\u00f3mo se pronuncia?) haciendo blogs tem\u00e1ticos, en los que b\u00e1sicamente, inclu\u00eda enlaces (lo contaba en asuntos varios<\/a> y ah\u00ed puedes encontrar los enlaces).<\/p>\n
Hoy, casi doce a\u00f1os despu\u00e9s de la \u00faltima publicaci\u00f3n, vuelvo a escribir de nuevo aqu\u00ed.<\/p>\n
Probablemente este blog se nutra de esos enlaces y recursos pero utilizando y revitalizando webposible.\u00a0 Mientras muchos blogs de aquella \u00e9poca, contin\u00faan en estado zombie o directamente han desaparecido, yo vuelvo tras un descanso de casi doce a\u00f1os. Cuento contigo.<\/p>\n","protected":false},"excerpt":{"rendered":"
En una micropublicaci\u00f3n de Addy Osmani, muestra un peque\u00f1o 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\u00e1genes que probablemente est\u00e9n incumpliendo una regla b\u00e1sica de accesibilidad […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,5],"tags":[],"class_list":["post-491","post","type-post","status-publish","format-standard","hentry","category-accesibilidad","category-css"],"_links":{"self":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/comments?post=491"}],"version-history":[{"count":4,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/491\/revisions"}],"predecessor-version":[{"id":1088,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/491\/revisions\/1088"}],"wp:attachment":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/media?parent=491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/categories?post=491"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/tags?post=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}