Ir directamente al contenido de esta página

codexexempla.org

Imágenes accesibles

Tabla de contenidos

  1. Introducción
  2. Lo que dicen las pautas del W3C
  3. Imágenes decorativas
  4. Imágenes que transmiten un contenido
  5. Imágenes empleadas como vínculos
  6. Imágenes de texto
  7. Casos especiales
    1. Gráficas
    2. Mapas de imagen
    3. Caracteres en otros idiomas
  8. Conocer los límites
  9. El alt, una herramienta muy rudimentaria

Introducción

Si 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.

Lo que dicen las pautas del W3C

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:

Imágenes decorativas

É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.

  • Los 47 ronin, la historia
  • Los 47 ronin de Tamenaga Shunsui, y su influencia en la literatura japonesa
  • Los 47 ronin en el cine

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.

Imágenes que transmiten un contenido

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.

Cristal de agua, tras la oración del reverendo Kato

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.

Pino, mi personaje favorito (con diferencia) de Ergo Proxy.

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:

Captura de pantalla, Opera 9.10

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:

Cascadas en las Montañas Rocosas (Alberta, Canadá)

Ejemplo: Una imagen con alt y title

Imágenes empleadas como vínculos

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:

Ejemplo de barra de herramientas

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.

Imágenes de texto

Suelen ser esas imágenes que se emplean como encabezados cuando se quiere emplear una fuente concreta, al estilo de:

Ejemplo de imagen de texto

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.

Casos especiales

Gráficas

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:

Gráfica: Distribución de ventas

Ejemplo: Una gráfica

Mapas de imagen

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:

Steve Reich: Discografía 1965-1968 It's Gonna Rain Come Out Melodica Piano Phase Violin Phase My Name Is Pendulum Music

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.

Caracteres en otros idiomas

É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 La imagen de un texto en ruso.

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: спасибо.

Conocer los límites

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:

Vasili Kandinsky, «Composición VII», 1913

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.

El alt, una herramienta muy rudimentaria

Por ú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:

¿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:

Captura de pantalla, Opera 9.10.

Para acceder a la herramienta despliegue el menú Ver → Pantalla pequeña.

También puede acceder a ella por medio del teclado con el atajo Mayús + F11.

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 &rarr; 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...

El ejemplo anterior, tal como se ve en Explorer 6

...y la segunda Internet Explorer 7.

El ejemplo anterior, tal como se ve en 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.

Notas

  1. Un caso distinto es el de Opera 9, que los mantiene tanto tiempo como se mantenga el ratón situado sobre el elemento. Desde mi punto de vista, ésta parece la opción más razonable. Volver
  2. Los visitantes perspicaces habrán comprobado que el primer vínculo de esta página dice «Ir directamente al contenido de esta página», una clara contradicción con lo que acabo de exponer. Es cierto que no debería ser necesario más que «Contenido principal» —mi opción inicial— o incluso «Contenido», pero tengo el privilegio —no sólo como desarrollador preocupado por la accesibilidad— de tener un amigo ciego; cuando le pedí que navegase mi sitio me indicó que inicialmente ese vinculo le resultó confuso. Pensando sobre ello llegué a la conclusión de que por desgracia no es una técnica de accesibilidad todo lo extendida que debiera, y que aún no se ha asimilado como otras convenciones. Por ello redacté el vínculo de esta forma para enfatizar su función. Sería necesario hacer más pruebas con usuarios, pero mientras no tenga los medios no me parece mala medida preventiva. Volver
  3. Tanto es así que se puede rastrear sus orígenes hasta la especificación de HTML 2.0 de septiembre de 1995 (inglés). Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA