jueves, 12 de abril de 2012

Pequeña mejora en la accesibilidad de Blogger

Recordemos que según la Web Accessibility Initiative (WAI), la accesibilidad web depende de tres elementos (Essential Components of Web Accessibility):
  • Los desarrolladores web, que emplean las herramientas de autor,
  • para crear el contenido web,
  • al que los usuarios acceden mediante agentes de usuario (navegadores) y productos de apoyo.

Diagrama que explica los tres elementos esenciales de la accesibilidad web: desarrolladores, contenido, usuarios

Para que la accesibilidad web funcione, los tres elementos deben funcionar correctamente. Para cada uno de esos elementos, el WAI ha creado guías concretas:


Los gestores de contenido (Content Management Systems, CMS) es el software más popular que se emplea hoy en día para crear sitios web. Ejemplos de este software son WordPress o Blogger, el software con el que está hecho este blog. Los gestores de contenido son herramientas de autor y, por tanto, se les aplican las pautas de ATAG.

El punto de verificación 3.1 de ATAG 1.0 dice:
3.1 Prompt the author to provide equivalent alternative information (e.g., captions, auditory descriptions, and collated text transcripts for video).
Traducido al castellano:
3.1 Pida al autor que proporcione información alternativa equivalente (por ejemplo, títulos, descripciones auditivas, y transcripciones intercaladas de texto para el vídeo).
Si consultamos el documento de técnicas para este punto de verificación, comprobamos que se relaciona con diferentes puntos de verificación de WCAG 1.0, como por ejemplo el 1.1 "Proporcione un texto equivalente para todo elemento no textual".

Desde hace años, cuando doy un curso y explico la accesibilidad de los gestores de contenido, comparo la forma de cumplir esta pauta en WordPress y en Blogger cuando se inserta una imagen.

En el caso de WordPress, al insertar una imagen se muestra un panel para que el usuario/autor introduzca información sobre la imagen, incluido el texto alternativo de la imagen que se utilizará en el atributo alt.


Sin embargo, en Blogger, hasta hace poco, era imposible introducir el texto alternativo. Existía una opción llamada "Añadir leyenda" que podía parecer que servía para eso, pero simplemente añadía el texto como pie de figura. Si alguien quería definir el texto alternativo de una imagen lo tenía que hacer editando directamente el código HTML, cosa que la mayoría de los usuarios de Blogger o de WordPress no saben hacer.

Afortunadamente, en Blogger recientemente han añadido una opción más llamada "Properties" (es tan reciente que todavía no han tenido tiempo de traducirla al castellano), como podemos ver en la siguiente imagen:


Al pulsar en "Properties" se muestra un panel en el que se puede introducir tanto el texto para el atributo title como para el atributo alt (otra vez, se les ha olvidado traducirlo al castellano):


Finalmente, si revisamos el código HTML que genera Blogger, podemos verificar que sí que se añaden los atributos title y alt a la etiqueta img: