El otro día mencionaba la recomendación ya publicada de las directrices WCAG en su versión 2.0 y de paso comentaba la problemática de la directriz obsoleta 10.4 de prioridad 3, afortunadamente ya desaprobada.

Ahora voy a comentar otra diferencia de la nueva versión de WCAG 2.0.

Anteriormente y debido a la directriz 12.2 de prioridad 2, era necesario describir las relaciones y propósitos de los  marcos/frames (preferiblemente prescindir de ellos) si no resultaba obvio únicamente con el atributo title y para ello se debía hacer uso del atributo longdesc.

En la versión WCAG 2.0 ya no es necesaria esta descripción larga longdesc, incluso nos dicen que este atributo no ha sido apoyado y que es probable que desaparezca de la especificación XHTML.

Personalmente, el atributo longdesc siempre me ha parecido un tanto «engorroso», y ahora más que nunca creo que sería bueno replantearnos su uso no solo en los frames sino también en la accesibilidad en imágenes.

Imagen de ASCII art

Imaginaros como puede llegar la información de esta imagen a una persona ciega a través de su lector de pantalla. Una repetición sonora de caracteres recurrentes sin el más mínimo significado y que finalmente se convierte en algo excesivamente molesto.

Lo bueno es que podemos contar con una alternativa muy sencilla y con un mínimo esfuerzo. Únicamente tenemos que capturar en una imagen el conjunto de caracteres ASCII, posteriormente incorporamos la imagen al documento web e indicamos en el atributo alt un significado coherente de lo que representa.

Otro caso común al respecto son los conocidos “emoticones”.
Para mejorar la semántica de esta representación textual se me ocurren tres opciones:

Encapsular los caracteres del emoticón en el elemento de abreviatura abbr, puesto que un emoticón es una representación textual abreviada de nuestro estado de ánimo.

<abbr title="carita">:)</abbr>

Capturar los caracteres como una imagen e indicar en el atributo alt la representación textual del emoticon. Este es el método usado por wordpress.

<img class="path" src="path" alt=":)" />

La última opción es similar a la anterior pero se diferencia en el atributo alt, resultando ser bastante más semántico.

<img src="path" alt="carita sonriente" />