Ir directamente al contenido de esta página
id y classalt, una herramienta muy rudimentariaSi alguien me hiciera alguna pregunta de laboratorio al estilo de «si sólo un aspecto de un sitio lo hiciera innaccesible, ¿cuál sería?», contestaría que las alternativas a su contenido gráfico.
El obstáculo más grave que presentan las imágenes es que su contenido es opaco para las personas ciegas y puede serlo para quienes tengan visión disminuida. Estas personas suelen emplear como principal tecnología asistiva un lector de pantalla, un dispositivo que vuelve audible el texto de un documento. El lector puede avisar al usuario de la presencia de una imagen, pero obviamente no puede describírsela, y de ahí la necesidad de ofrecer un contenido textual alternativo.
Así, primero vamos a ver lo que dicen las pautas de accesibilidad del W3C y luego veremos casos concretos de cuándo y cómo ofrecer tales alternativas.
El punto 1.1. de la pautas de accesibilidad del W3C (inglés) dice:
Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
[Proporcione un texto equivalente para todo elemento no textual (p.ej., por medio de
alt,longdesc, o en el contenido del elemento.)]
Y la definición de equivalente textual en el documento general de técnicas de accesibilidad (inglés) es:
Text equivalents must be written so that they convey all essential content.
Los textos equivalentes deben escribirse de manera que transmitan todo contenido esencial.
A su vez, sobre el texto equivalente el documento sobre técnicas esenciales de accesibilidad (inglés) se lee:
When a text equivalent is presented to the user, it fulfills essentially the same function (to the extent possible) as the original content. For simple content, a text equivalent may need only describe the function or purpose of content. For complex content (charts, graphs, etc.), the text equivalent may be longer and include descriptive information.
[Cuando se presenta un texto equivalente al usuario, éste cumple esencialmente la misma función (en la medida de lo posible) que el contenido original. Para un contenido simple, un texto equivalente puede necesitar sólo describir la función o el propósito del contenido. Para un contenido complejo (un cuadro estadístico, una gráfica, etc.), el texto equivalente debe ser más extenso e incluir información descriptiva.]
y más abajo:
Quicktest! A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?
[¡Prueba rápida! Una buena manera de determinar si el texto equivalente es útil es imaginarse leyendo el documento al teléfono. ¿Qué diría al encontrarse con esa imagen para hacer la página comprensible para su interlocutor?]
Tal vez sea este último fragmento el que ha creado más confusión sobre cuál debe ser el contenido del texto alternativo, y en foros, listas de distribución y páginas de tutoriales siempre hay discusión sobre si el texto debe describir la imagen o si debe proporcionar una alternativa de su función. Desde mi punto de vista, no se trata de técnicas excluyentes como muchas veces parece plantearse, sino que «proporcionar una alternativa de su función» es el objetivo de la pauta, y «describir la imagen» es una de las técnicas para alcanzarlo. Comparemos dos situaciones para aclarar este punto:
Abajo presento casos concretos, pero antes hay que saber con que medios de marcado se cuenta para proporcionar las alternativas en el marcado de un documento:
alt: Proporciona una alternativa a la imagen, por lo que debe contener un texto que cumpla la misma función que ésta, es decir que permita al usuario realizar una acción o recibir un contenido.El atributo title: Sirve para ofrecer una información adicional sobre la imagen, por lo que si bien toda imagen debe tener un alt —aunque sea vacío—, title es opcional.
Una nota importante, aunque parezca obvio: un alt no es un title, ni un title es un alt. Digo esto porque durante un tiempo hubo cierta confusión, ya que Internet Explorer representaba el contenido de alt como una ayuda visible para todo usuario. Esto hizo que muchos desarrolladores considerasen que title era una alternativa para otros navegadores, un pensamiento análogo al empleo de object y embed. La consecuencia fue que en el alt se escribía un title, y en éste se reproducía el mismo texto. Éste es un error muy común, que afecta a los usuarios de un lector de pantalla que de esta forma se ven obligados a escuchar una información redundante.
Por último, no hay un límite para los caracteres que puede contener title, pero hay que tener en cuenta que su contenido sirve también como ayuda para personas sin ceguera, y esto hace que se presenten dos limitaciones:
El atributo longdesc: Cuando el contenido que transmite una imagen es crítico para el usuario —su ausencia provoca que la información del contexto de la imagen quede incompleto sin ésta—, debe describirse extensamente. Este atributo permite indicar el URL de un documento que contenga tal descripción.
El principal problema que plantea longdesc es que los navegadores no cuentan con una interfaz adecuada para tratar esta información. A lo sumo, pueden incluirla en el cuadro de diálogo de las propiedades de imagen, como es el caso de Firefox:
En el campo de Descripción es donde aparece la dirección del archivo con la descripción. Lo ideal sería que de alguna manera se presentase la información…
…pero como de momento no es así, cada autor desarrolla su propia solución. Andy Clarke, por ejemplo, propone incluir la información como notas al pie de un documento (inglés), y ocultarlas por medio de CSS. Personalmente, prefiero mantener esa información independiente para no sobrecargar el documento, así que lo que hago es vincular la imagen a su descripción, e indicarlo en su title.
Éste es el caso más sencillo, así que empecemos por él.
Hay ocasiones en las que una imagen se incluye como mera decoración en un documento.
Ejemplo: Una imagen decorativa
Como se ve, la imagen del samurai no tiene función alguna, no aporta información por sí misma, y no complementa la de los vínculos junto a los que se ha situado. Es un añadido meramente estético.
Lo lógico, entonces, sería incluirla por medio de CSS, dado que pertenece a la presentación del documento.
Si por algún extraño motivo no puede ser así, esta imagen no necesita una alternativa textual, por lo que lo más apropiado es asigarle alt="", y no incluir un title.
En esta categoría entrarían las imágenes empleadas como viñetas de una lista no ordenada. Casi todo manual de accesibilidad las menciona, por el hecho de que aparecen en la documentación del W3C sobre técnicas de accesibilidad para HTML (inglés). Sin embargo, viendo el estado de los navegadores actuales, esta técnica hace referencia a una práctica obsoleta —incluir en el marcado del documento caracteres que funcionen como viñetas—. Simplemente deben aplicarse al documento a través de CSS, por medio de list-style-image.
El caso más frecuente es incluir una imagen que complemente o ilustre un contenido textual. En estos casos, podríamos encontrarnos con una subdivisión de las imágenes: las que son imágenes ilustrativas del contexto en el que se encuentran, pero no son críticas para su comprensión, y aquellas sin las cuales la información del contexto queda incompleta.
Para el primer caso —la imagen ilustrativa pero no crítica—, el texto alternativo debe proporcionar una identificación del contenido de la imagen, que ponga de relevancia su relación con el contexto en el que se incluye.
En cuanto a cómo proporcionar esta alternativa, se puede hacer por medio del atributo alt, por un medio tradicional de edición como es el pie de foto, o por referencia desde el contexto.
En el siguiente ejemplo el texto recoge la introducción de una reseña de una obra de Emoto; la imagen que lo acompaña pertenece a esa misma obra.
En 1999 Masaru Emoto publicó un libro, Mensajes del agua en el que recogía las fotografías de cristales de agua congelada sometida a lo que él llama información HADO, energías sutiles relacinadas con la conciencia equivalentes al Chi del taoísmo o el budismo. Su teoría se basa en que el agua es capaz de codificar y almacenar la información HADO, y modificar así su estructura y propiedades.
Ejemplo: Una imagen ilustrativa sin pie
Como se ve, la imagen es una ilustración del texto, pero éste es perfectamente comprensible sin ella. Es suficiente, por tanto, un alt="Cristal de agua, tras la oración del reverendo Kato". En este caso además incluyo un title con información adicional sobre los derechos de autor de la misma, pero sobre este atributo hablaré un poco más abajo.
Para el siguiente ejemplo empleo un pie de foto inmediatamente posterior a la imagen.
Ergo Proxy (inglés), el anime de Shukou Murase y Dai Sato, es a la vez la narración de una antiutopía, la ciudad-cúpula de Romudo, y un relato existencial. Androides —autoraves— que toman conciencia de sí mismos por la exposición a un misterioso virus llamado Cogito, ciudadanos humanos cuyos destinos dirige el Consejo —los cuatro androides que rodean al enfermo y mudo Cónsul recluido en su torre— y cuya única razón de ser consiste en formar parte de la ciudad. Y, por último, un extraño ser de proporciones míticas: el Creador que abandonó a sus criaturas y que regresa después de redescrubrirse a sí mismo, no para salvar su creación, sino para destruirla. En ocasiones el guión puede resultar un poco confuso, pero indudablemente seduce.
Ejemplo: Una imagen ilustrativa con pie
Si se emplea esta técnica, el alt debe ser uno vacío, para no saturar al usuario de un lector de pantalla con información redundante, igual que para la siguiente, en la que la información importante de la imagen ya la recojo en el propio texto, y en éste hago referencia explícita a la misma:
En la imagen anterior —extraída del banco de imagenes del CNICE— podemos observar la estructura de la flor Edelweiss (Leontopodium alpinum) y la disposición actinomorfa de sus pétalos.
Ejemplo: Una imagen referida en su contexto
Por último, si una imagen transmite una información esencial que no está recogida en su contexto, hay que vincular a ella una descripción por medio de longdesc:
Opera 9.10 incluye una herramienta muy útil para desarrolladores, que ofrece la posibilidad de simular un dispositivo de mano. Gracias a ella se puede comprobar el aspecto de una página en un agente de usuario adicional, y también comprobar el soporte de este navegador para una hoja de estilo vinculada con media="handheld". Para activarla:
Ejemplo: Una imagen que necesita una descripción
Como en el caso de alt, la descripción debe contener la información necesaria para que la imagen sirva al mismo propósito para el que se ha incluido en el documento. En la descripción del ejemplo anterior sólo describo que la imagen es una captura de pantalla de un navegador, identifico éste, y explico como acceder al menú representado en ella. No describo, por ejemplo, que en la ventana del navegador aparece la página oficial de Shin Megami Tensei:Digital Devil Saga 2 de la división estadounidense de ATLUS.
Por último repetiré aquí lo ya he comentado del atributo title: éste ofrece información adicional sobre la imagen para todo usuario, no sólo para quienes no puedan acceder a la imagen; por ello no hay que repetir el texto del alt en el mismo:
Ejemplo: Una imagen con alt y title
A diferencia del caso anterior, para estas imágenes cuanto más descriptiva es su alternativa, menos útil resulta. Supongamos, por ejemplo, una barra de herramientas como ésta:
cuyas alternativas textuales fuesen alt="Un icono que representa una casa", alt="Un icono que representa un sobre", alt="Un icono que representa una impresora" y alt="Una interrogacíon"; a todas luces son inútiles, dejando a un lado la «universalidad» o no de las imágenes icónicas. Dado que su finalidad sería vincular a diversos documentos, hay que pensar cuál sería su texto si fuesen vínculos comunes. Así, las alternativas podrían ser: alt="Página principal del sitio", alt="Contacto", alt="Versión imprimible" y alt="Ayuda".
La mejor forma de crear un texto alternativo a una imagen que funciona como un vínculo es, por tanto, crear primero el enlace textual como si todas y cada una de las copias de Photoshop y similares se hubiesen borrado de todo disco duro, y luego asignar esos textos a las imágenes con las que se sustituyan.
Un detalle: no es necesario incluir en los textos cosas como «Ir a la página…», igual que no creamos una barra de navegación con los textos «Ir a la página de inicio», «Ir al catálogo de productos», «Ir a la página de contacto».2
Un caso especial se da si las imágenes forman un mismo vínculo con un texto:
Diapositiva anterior | Siguiente diapositiva 
En este caso estamos en una situación análoga al primer caso estudiado, y los iconos podrían tratarse como elementos decorativos: o bien se incluyen por medio de una hoja de estilo, o bien se les asigna un alt vacío.
Suelen ser esas imágenes que se emplean como encabezados cuando se quiere emplear una fuente concreta, al estilo de:
En estos casos es suficiente un alt que repita el texto de la imagen. Para la anterior sería entonces alt="Arvo Pärt, «Tabula Rasa»".
No obstante, no soy muy partidario de emplear imágenes de textos, puesto que no sólo hay que tener en cuenta si la imagen tiene un contraste suficiente, sino que el tamaño de la fuente empleada no se puede ampliar de la manera que se amplia el resto del texto del documento. Además, el usuario no tiene forma de cambiar los colores del fondo ni de los caracteres, una posibilidad que, aunque poco conocida por el usuario medio, al menos existe para el resto del documento.
Cuando se trata de gráficas, creo que lo mejor es ofrecer en el contexto la información que resuma la gráfica, y para esta ofrecer como descripción los datos completos como opción complementaria.
Para el ejemplo siguiente, en el texto resumo la información que proporciona la imagen, y como descripción presento una tabla con todos los datos que conforman la gráfica.
Para este semestre, las ventas de nuestro programa Eudemo casi han alcanzado las de su predecesor en el mercado. De hecho, ambos suponen actualmente el 75 por ciento de nuestras ventas totales:
Ejemplo: Una gráfica
Sobre estos, sólo una breve nota.
Por descontado, hay que incluir un alt para cada área activa —redactado como para el caso de las imágenes empleadas como vínculos—, pero además se debería incluir otro que abarque al mapa completo y que explique su función. Por ejemplo, el siguiente mapa de imagen presenta como zonas activas los títulos de las obras de Steve Reich entre los años 1965 y 68:
Ejemplo: Un mapa de imagen
Cada elemento area tiene un alt con el mismo texto que aparece en la imagen, pero además he incluido un área adicional:
<area shape="default" href="#" alt="Steve Reich: Discografía 1965-1968" />
Como se vio al tratar el elemento area, shape="default" abarca las zonas no activas del mapa; convirtiéndolo en un vínculo sin destino —href="#"— situado antes de los demás nos aseguramos de que al accederse a la lista de los mismos en el mapa el usuario de un lector de pantalla primero recibe la información del alt que indica que los siguientes son las obras de Reich.
Éste es un caso antiguo pero de vez en cuando se ve por la red: sustituir una palabra en un alfabeto no occidental por una imagen, como por ejemplo 
.
Además de lo poco flexible que resulta el método si se quiere cambiar el texto —puesto que habría que generar una nueva imagen—, queda el problema de que hay que ofrecer un texto alternativo, que, a mi modo de ver, debería ser una transliteración del mismo.
Afortunadamente el soporte de las codificaciones de los documentos en los navegadores ha mejorado actualmente, con lo que basta con elegir una que incluya el idioma principal de la página y el de la expresión en otro diferente. O ya que estamos, codificar los documentos en UTF-8, que así se tienen todos, y no hay más que incluir el texto desde un procesador: спасибо.
Por supuesto, hay imágenes que no pueden ser descritas, de esas que algunos suelen emplear en foros de desarrolladores como excusa para no redactar textos alternativos apropiados. Un ejemplo:
Ejemplo: Una imagen indescriptible
Tratándose de obras de arte, no pueden ser descritas si es su propio contenido lo que ilustran. Si resucitásemos a Nabokov para que nos describiese la imágen anterior, seguramente nos podría escribir una maravillosa pieza literaria, pero aún así no podría transmitir la experiencia estética de la obra de Kandinsky, no porque sea una obra no figurativa, sino porque su propia naturaleza pictórica la convierte en un objeto visual. El único alt posible es una identificación de la obra.
No obstante, hay que recordar que estos casos son la excepción, no la regla.
alt, una herramienta muy rudimentariaPor último, una breve nota sobre las limitaciones que impone el atributo alt, debidas a que se trata de un medio muy primitivo3 de ofrecer una alternativa a un contenido no textual:
alt y longdesc y, en parte, title.¿Cómo podría mejorarse esta situación?
Lo gracioso es que ya existe una mejora sustancial: el elemento object. Al no tratarse de un elemento vacío, puede contener toda la información marcada que se desee. Por ejemplo, repitamos el caso de la imagen que ilustraba el menú de un navegador:
Ejemplo: Uno de los ejemplos anteriores, con object
En este caso, el marcado de la imagen es el siguiente:
<object type="image/jpeg" data="xhtml/imagenes/imgs_acc_11.jpg" width="393" height="282">
<p>Captura de pantalla, Opera 9.10.</p>
<p>Para acceder a la herramienta despliegue el menú <strong>Ver → Pantalla pequeña</strong>.</p>
<p>También puede acceder a ella por medio del teclado con el atajo <kbd>Mayús</kbd> + <kbd>F11</kbd>.</p>
</object>
Como se ve, por medio de este elemento la imagen contiene toda la información alternativa marcada y perfectamente accesible para un lector de pantalla.
Uno se pregunta, por tanto, como es que esta solución no se implementa con más frecuencia. Y las respuestas son dos: la primera Internet Explorer 6...
...y la segunda Internet Explorer 7.
En fin, tal vez cuando estas dos versiones sean un recuerdo mal recuerdo del pasado —y suponiendo que la versión 8 solucione el problema— este uso de object sea más común.
Por supuesto, se puede encontrar alguna manera de solucionar la pobre implementación de object en Explorer, pero en pocas ocasiones realmente merece la pena. Si alguien está interesado, casi por casualidad logré este parche, aunque no me satisface en absoluto.
