Este documento proporciona guías para comprobar la accesibilidad de imágenes en sitios web. Explica la importancia de proporcionar equivalentes textuales para todas las imágenes y describe cómo hacerlo de manera adecuada dependiendo del tipo de imagen. También detalla métodos para validar que las imágenes tengan los equivalentes textuales correctos y que cumplan con otros requisitos de accesibilidad como el color y contraste.

1. Instituto Nacional
de Tecnologías
de la Comunicación
Guías Prácticas de
Comprobación de
Accesibilidad:
IMÁGENES
Centro de Referencia en Accesibilidad
y Estándares Web
Marzo 2008

2. Instituto Nacional
de Tecnologías
de la Comunicación
Copyright © 2008 Instituto Nacional de Tecnologías de la comunicación (INTECO)
El presente documento está bajo la licencia Creative Commons Reconocimiento-No comercial-Compartir Igual versión 2.5
España.
Usted es libre de:
- copiar, distribuir y comunicar públicamente la obra
- hacer obras derivadas
Bajo las condiciones siguientes:
- Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero
no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).
- No comercial. No puede utilizar esta obra para fines comerciales.
- Compartir bajo la misma licencia. Si altera o transforma esta obra, o genera una obra derivada, sólo puede distribuir
la obra generada bajo una licencia idéntica a ésta.
Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta obra.
Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor
Nada en esta licencia menoscaba o restringe los derechos morales del autor.
Esto es un resumen legible por humanos del texto legal (la licencia completa) disponible en
http://creativecommons.org/licenses/by-nc-sa/2.5/es/
El presente documento cumple con las condiciones de accesibilidad del formato PDF (Portable Document Format).
Se trata de un documento estructurado y etiquetado, provisto de alternativas a todo elemento no textual, marcado de idioma
y orden de lectura adecuado.
Para ampliar información sobre la construcción de documentos PDF accesibles puede consultar la guía disponible en la
sección Accesibilidad > Formación > Manuales y Guías de la página http://www.inteco.es.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 2

3. Instituto Nacional
de Tecnologías
de la Comunicación
ÍNDICE
1. OBJETIVO DE LA GUÍA 4
2. EQUIVALENTES TEXTUALES 5
2.1. Texto alternativo 5
Imágenes de contenido 6
Imágenes decorativas 6
Imágenes funcionales 6
Imágenes con texto 7
Imágenes dinámicas 8
2.2. Descripción larga 8
3. VALIDACIÓN DE IMÁGENES 10
3.1. Validación de los equivalentes textuales 10
3.1.1. Existencia de texto alternativo 10
3.1.2. Adecuación de las alternativas 13
3.2. Color y Contraste 16
3.2.1. Color 16
3.2.2. Contraste 22
3.3. Destellos, parpadeos y movimiento 27
3.4. Marcadores en vez de imágenes para transmitir información 28
4. VALIDACIÓN DE MAPAS DE IMAGEN 30
5. CONCLUSIONES 33
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 3

4. Instituto Nacional
de Tecnologías
de la Comunicación
1. OBJETIVO DE LA GUÍA
Entre las medidas a adoptar para la consecución de un sitio Web accesible, una de las
primeras y más importantes a tener en cuenta es la de proporcionar buenos equivalentes
textuales para todas las imágenes y, en general, para todo el contenido no textual. Los
usuarios que no puedan acceder a la información visual (discapacitados visuales, usuarios
de navegadores de texto o con capacidad gráfica limitada, etc.) pierden la información
proporcionada por ese medio si no se proporcionan equivalentes textuales adecuados.
El texto se considera accesible para prácticamente todos los usuarios ya que puede ser
presentado visualmente así como interpretado por los productos de apoyo.
Además se han de tener en cuenta otros requisitos de accesibilidad como son el color y
contraste, no usar imágenes animadas ni con destellos o parpadeos y, por norma general,
no usarlas para transmitir información textual que se pueda representar fácilmente mediante
XHTML y CSS.
El objeto de la presente guía práctica es la de proporcionar información sobre los aspectos
que intervienen en la comprobación de accesibilidad del contenido Web basado en
imágenes y mapas de imagen. Se pretende ofrecer una visión general de la Accesibilidad
para esta tipología de contenidos así como una metodología práctica que permita comprobar
la adecuación de los mismos conforme a las normativas y recomendaciones vigentes.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 4

5. Instituto Nacional
de Tecnologías
de la Comunicación
2. EQUIVALENTES TEXTUALES
La alternativa a las imágenes, aunque no parezca entrañar una excesiva dificultad, es uno
de los aspectos menos comprendidos y más proclive a errores ya que no siempre resulta
obvio cuál es la alternativa textual más adecuada para una imagen.
Por tanto, y con el fin de tener la base necesaria para realizar una correcta validación, a
continuación se recordará brevemente como se realizan equivalentes textuales adecuados.
Los equivalentes textuales deben proporcionar la misma información o función (en la medida
de lo posible) que la imagen original.
Existen dos mecanismos para proporcionar equivalentes textuales a las imágenes:
• Texto alternativo (alt): el objetivo del texto alternativo es el de proporcionar un
equivalente textual breve y conciso para las imágenes.
• Descripción larga (longdesc): si la imagen es compleja, y precisa de una
descripción demasiado extensa para el texto alternativo, es necesario usar este
mecanismo para proporcionar una descripción más detallada.
2.1. TEXTO ALTERNATIVO
Toda imagen incluida en una página Web, a través del elemento IMG, debe proporcionar
(mediante el atributo alt obligatorio) un texto alternativo, que aporte la misma información
o función que la imagen.
El texto alternativo es la información proporcionada por los agentes de usuario
(navegadores y productos de apoyo) en caso de no mostrarse la imagen. Por ejemplo, los
navegadores gráficos que tengan las imágenes desactivadas o no puedan mostrarlas (ruta
incorrecta de la imagen), y los navegadores de texto, usarán el texto alternativo en su lugar.
Por otra parte, los lectores de pantalla leerán en voz alta el texto alternativo de las
imágenes.
Ejemplo de código:
<img src="imagen.png" alt="descripción breve" />
NOTA: En el caso de las imágenes añadidas a través del elemento OBJECT, dicha alternativa deberá incluirse
en el propio cuerpo del elemento. Este método de inserción de imágenes en una página Web no tiene un soporte
extendido y se recomienda emplear el elemento IMG para tal fin para garantizar la correcta interpretación del
mismo.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 5

6. Instituto Nacional
de Tecnologías
de la Comunicación
Ejemplo de código:
<object type="image/png" data="imagen.png">
<!-- Contenido alternativo -->
</object>
El texto alternativo depende del tipo de imagen usada o de la función de la misma. Así, de
forma general, podemos diferenciar los siguientes casos:
Imágenes de contenido
Se considera que una imagen es de contenido cuando proporciona información. En este tipo
de imágenes, como ya se ha comentado, el texto alternativo debe proporcionar un
equivalente textual breve que proporcione la misma información que la imagen original.
Imágenes decorativas
Se consideran imágenes decorativas aquellas usadas como recursos gráficos para el
diseño de las páginas y que no proporcionan ninguna información o funcionalidad. Por
ejemplo: separadores, imágenes de diseño o relleno, imágenes empleadas como viñetas de
listas, etc.
Este tipo de imágenes deberían incluirse mediante las hojas de estilos (CSS). Sin embargo,
en caso de incluirse en el código HTML mediante el elemento IMG, el texto alternativo debe
estar vacío (alt=""), o contener un espacio en blanco (alt=" ") cuando la imagen sea lo
único que separe dos elementos contiguos.
Imágenes funcionales
Una imagen funcional es aquella que actúa de vínculo con una página Web o un archivo.
Cuando se usa una imagen como enlace existen dos posibilidades para proporcionar un
texto alternativo:
Si, el enlace está formado por un texto descriptivo y una imagen (que no aporta
información relevante), entonces puede considerarse como decorativa, dejando vacío el
texto alternativo.
Figura 1. Dado que en el propio texto del enlace se indica que se trata de un documento PDF la
imagen no aporta información adicional del enlace.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 6

7. Instituto Nacional
de Tecnologías
de la Comunicación
Ejemplo de código:
<a href="norma.pdf">
<img src=”logo.gif” alt=”” />Norma UNE 139803:2004 (PDF)
</a>
Si la imagen es el único elemento que funciona como enlace, entonces el texto
alternativo deberá describir el destino o propósito del vínculo.
Figura 2. Icono que enlaza con la página principal. Alt=”Página de inicio”
Como norma general, la funcionalidad de una imagen prevalece a la propia imagen, y salvo
casos aislados, en la alternativa no se deberá describir la imagen, sino el propósito de la
misma (el destino del enlace). Si la imagen requiere ser descrita se empleará el atributo
longdesc para dicho fin.
Por esta razón, el texto alternativo se convierte en texto del enlace, y debe identificar
adecuadamente el destino del mismo de forma clara y concisa.
Imágenes con texto
Por lo general, en el texto alternativo se debe proporcionar el texto íntegro que se muestre
en la imagen.
En la siguiente imagen el texto alternativo correcto sería INTECO Premio IMSERSO “Infanta
Cristina” 2007. Premio I+D+i en Nuevas Tecnologías y Ayudas Técnicas”.
Figura 3.Ejemplo de imagen con texto. En la alternativa deberá aparecer el texto íntegro
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 7

8. Instituto Nacional
de Tecnologías
de la Comunicación
Imágenes dinámicas
El contenido alternativo equivalente tiene que aportar la misma información o funcionalidad
que el contenido original aunque éste varíe dinámicamente. En este sentido se ha de prestar
especial atención a aquellas imágenes que cambien o se modifiquen dinámicamente, ya que
la alternativa también deberá actualizarse adecuadamente.
Figura 4. Ejemplo de imagen dinámica. Contador de visitas
2.2. DESCRIPCIÓN LARGA
Cuando el texto alternativo no es suficiente para transmitir adecuadamente la información,
función o propósito de una imagen (por ejemplo, una gráfica de estadísticas), se deberá
emplear el atributo longdesc del elemento de imagen IMG para aportar dicha información.
El atributo longdesc debe contener la URL de la página donde se proporciona una
descripción detallada de la imagen.
La descripción puede estar situada en la misma página que la imagen, preferiblemente
antes o después de la misma, de forma que dicha descripción se relacione con la imagen
por el contexto, y enlazada con el atributo longdesc mediante un enlace de tipo ancla. El
texto alternativo de la imagen debe tener una breve descripción que permita identificar la
imagen aunque no entre en detalle.
No todos los agentes de usuario interpretan el atributo longdesc adecuadamente, por ello
se recomienda proporcionar además un vínculo redundante a la descripción detallada al
lado de la imagen. Por ejemplo, puede proporcionarse en forma de pie de imagen que
funcione al mismo tiempo como enlace a la descripción detallada.
Figura 5. Ejemplo de imagen cuyo pie de imagen actúa de enlace a la descripción larga
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 8

9. Instituto Nacional
de Tecnologías
de la Comunicación
Ejemplo de código:
<img src="grafic.png" alt="Superficie de los continentes"
longdesc="descripcion.html">
<a href="descripcion.html" title=”Enlace a la descripción
detallada de la imagen”>Superficie de los continentes</a>
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 9

10. Instituto Nacional
de Tecnologías
de la Comunicación
3. VALIDACIÓN DE IMÁGENES
A continuación se explicarán los métodos y herramientas necesarios para la validación de
imágenes, tanto a nivel de existencia y adecuación de alternativas textuales, como a nivel de
contenido para verificar el correcto uso de las mismas
3.1. VALIDACIÓN DE LOS EQUIVALENTES TEXTUALES
3.1.1. Existencia de texto alternativo
La ausencia del atributo alt es un error gramatical y por ello es detectado
automáticamente por las herramientas de validación de gramática y de Accesibilidad
(validador de código (x)HTML y herramientas automáticas como TAW).
Por otra parte, las barras de herramientas usadas para la evaluación manual (barra de
herramientas Web Accessibility Toolbar de Internet Explorer y Web Developer Toolbar de
Mozilla Firefox) contienen opciones para detectar las imágenes que carecen de texto
alternativo.
URL de Descarga Web Developer Toolbar:
https://addons.mozilla.org/en-US/firefox/addon/60
URL de Descarga Web Accessibility Toolbar:
http://www.visionaustralia.org.au/info.aspx?page=614
Así, en la barra de herramientas Web Accessibility Toolbar, se pueden reemplazar las
imágenes por su texto alternativo con la opción Images - Toggle Image/Alt
Figura 6.Reemplazar imágenes por su alternativa en Web Accessibility Toolbar
Si no existen alternativas a las imágenes de la página Web a comprobar, se mostrará un
mensaje de alerta advirtiendo tal hecho.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 10

11. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 7. Mensaje alerta sobre imágenes sin alternativa en Web Accessibility Toolbar
De similar forma, la barra de herramientas Web Developer Toolbar permite resaltar aquellas
imágenes que no disponen de texto alternativo con la opción Images - Outline Images -
Images Without Alt Attributes
Figura 8. Resaltar imágenes sin texto alternativo en Web Developer Toolbar
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 11

12. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 9.Ejemplo de imagen resaltada sin alternativa
Desactivación de hojas de estilo CSS
Como caso particular de comprobación se ha de tener en cuenta que las imágenes
insertadas a través de la hoja de estilos CSS no tienen el atributo alt necesario para indicar
el equivalente textual. Por esta razón, las únicas imágenes susceptibles de ser insertadas
desde la hoja de estilos CSS son las decorativas, salvo que se empleen técnicas accesibles
de reemplazo de texto por imágenes, ya que al no transmitir información relevante no se
pierde ningún contenido ni funcionalidad al carecer de ellas.
El procedimiento a realizar es pues, desactivar los estilos y las imágenes de fondo para
comprobar que no se pierde ninguna información relevante.
Figura 10. Opción deshabilitar CSS de la barra Web Accessibility Toolbar
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 12

13. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 11. Opción Deshabilitar estilos de la barra Web Developer Toolbar
Figura 12. Opción Ocultar imágenes de fondo de la barra Web Developer Toolbar
Sin embargo, es importante recordar que no sólo se debe comprobar la existencia de
alternativas textuales, sino también la adecuación de las mismas.
3.1.2. Adecuación de las alternativas
Para comprobar la adecuación de las alternativas a las imágenes deberá realizarse un
proceso manual apoyado en las barras de herramientas y revisión de código.
Un posible método de evaluación es acceder a la página a través de un navegador solo
texto o con un lector de pantalla. En todos estos casos, se comprobará que no se pierde
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 13

14. Instituto Nacional
de Tecnologías
de la Comunicación
ninguna funcionalidad ni contenido al prescindir de imágenes, evaluando las alternativas
ofrecidas a las mismas.
Para facilitar esta tarea se puede hacer uso de algunas herramientas que nos permiten
evaluar las alternativas más cómodamente sin necesidad de usar navegadores de texto o
lectores de pantalla.
Figura 13. Reemplazar imágenes con su alternativa en Web Accessibility Toolbar
El menú Images de la barra de herramientas Web Developer Toolbar para Mozilla Firefox,
contiene opciones para comprobar la adecuación de las alternativas, siendo la más útil
Display Alt Attributes (Mostrar atributos alt).
Figura 14.Opciones del menú Imágenes Web Developer Toolbar
• La opción Display Alt Attributes muestra al mismo tiempo la imagen y el texto
alternativo. De este modo se podrá comprobar más fácilmente la adecuación de la
alternativa comparando ambas y viendo si realmente son equivalentes.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 14

15. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 15. Imágenes con la opción Display Alt Attributes activada
• La opción View Image Information (Ver información de imagen) abre una nueva
página con la información relativa a todas las imágenes contenidas en el documento
Web.
Figura 16. Ejemplo de la información mostrada
• La opción Replace Images with Alt Attributes (reemplazar imágenes con sus
alternativas) actúa de igual modo que la opción Toggle Image/Alt (intercambiar
imagen con alt) de Web Accessibility Toolbar.
En el caso de que exista alguna imagen que requiera de una descripción larga, porque el
texto alternativo resulte insuficiente, se puede comprobar si se está proporcionando dicha
descripción con la extensión “Longdesc” para el navegador Firefox. Esta extensión muestra
una opción nueva en el menú contextual de aquellas imágenes que contengan longdesc
para acceder al documento enlazado en el que se proporciona la descripción.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 15

16. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 17. View Image Longdesc Firefox
3.2. COLOR Y CONTRASTE
3.2.1. Color
La información ofrecida mediante imágenes, no debe transmitirse utilizando como único
medio el color, ya que ésta podría no ser percibida por usuarios de pantallas
monocromáticas o con deficiencias en la percepción del color.
Como ejemplo de dependencia de color se observa cómo en la Figura 18, en escala de
grises (Figura 19), no es posible diferenciar entre las comunidades en alerta y las
comunidades sin riesgo.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 16

17. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 18. Mapa con dependencia de color
Figura 19. Mapa en escala de grises
Para corregir este problema de dependencia de color se pueden emplear diferentes
técnicas:
1. Elección de colores con el suficiente contraste de forma que permitan diferenciarse
entre si en escala de grises. (Ver apartado siguiente Contraste).
2. Emplear tramas para diferenciar las áreas dependientes de color.
3. Situar la leyenda encima de cada región del mapa.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 17

18. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 20. Ejemplo de empleo de trama para diferenciar las áreas
Figura 21. Ejemplo de empleo de trama en escala de grises
Para comprobar que no existe dependencia única de color en las imágenes se pueden
utilizar diferentes métodos de evaluación:
• Imprimir la página en blanco y negro y comprobar que no se pierde ninguna
información.
• Navegar en escala de grises emulando una pantalla monocromática.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 18

19. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 22.Escala de grises en Web Accessibility Toolbar
• Emular los diferentes tipos de daltonismo: deuteranopia, protanopia, tritanopia, etc.
─ Vischeck Colour blindness simulation (www.vischeck.com ).
Figura 23.Vischeck colour blindness simulation de la barra Web Accessibility Toolbar
Figura 24. Captura de la ventana de simulación
─ Fujitsu ColorDoctor (http://www.fujitsu.com/global/accessibility/assistance/cd/)
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 19

20. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 25. Fujitsu Color Doctor con ejemplo de Deuteranopia
• Simular diferentes tipos de deficiencias visuales. Por ejemplo a través de la
aplicación Visual Impairment Simulator
(http://www.cita.uiuc.edu/software/vis/downld.php)
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 20

21. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 26. Captura Visual Impairment Simulator
Figura 27. Simulación de Glaucoma
Figura 28. Simulación de Degeneración macular
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 21

22. Instituto Nacional
de Tecnologías
de la Comunicación
3.2.2. Contraste
Debe existir un contraste suficiente entre el color de primer plano y el color de fondo, en
especial en las imágenes que transmiten información textual.
Figura 29. Ejemplo de elección de un contraste insuficiente
Para comprobar las combinaciones de color de primer plano y color de fondo (contraste) se
puede utilizar la herramienta Colour Contrast Analyser.
En la opción Colour de la barra Web Accessibility Toolbar, existe un acceso directo a dicha
herramienta.
Figura 30. Colour Contrast Analyser - Web Accessibility Toolbar
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 22

23. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 31. Aplicación Colour Contrast Analyser
La aplicación Colour Contrast Analyser trabaja con dos algoritmos: el de diferencia de brillo y
color y el de luminosidad, siendo el primero el que se debe usar actualmente ya que el
algoritmo de luminosidad aún se encuentra en fase experimental.
Mediante un selector de color (cuentagotas) se escoge el color de fondo y el color de primer
plano que se desean evaluar, considerándose que la combinación es válida cuando supere
ciertos umbrales mínimos
Los valores mínimos son 125 para el diferencial de brillo y 500 para el diferencial de color.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 23

24. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 32. Ejemplo de un mal contraste
Colour Contrast Analyser permite, además, evaluar la diferencia de brillo y color también
para diferentes discapacidades en la percepción del color y se deben superar los umbrales
mínimos en cada una de ellas.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 24

25. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 33. Umbrales mínimos para las diferentes discapacidades en la percepción del color
Esta herramienta puede utilizarse de forma independiente a través de una aplicación de
escritorio:
URL de Descarga: http://www.visionaustralia.org.au/info.aspx?page=628
Por otro lado, existe la posibilidad de listar todas las combinaciones de colores de la página
con sus correspondientes resultados al aplicar cada uno de los algoritmos citados a través
de la aplicación Juicy Studio Colour Contrast Analyser
Para acceder a esta lista se ha de seleccionar la opción Contrast Analyser – all tests de la
opción Juicy Studio Contrast Analyser del menú Colour de la barra Web Accessibility
Toolbar.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 25

26. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 34. Contrast Analyser - all tests
O bien a través de la extensión correspondiente de Firefox Juicy Studio Contrast Analyser:
URL de Descarga: http://juicystudio.com/article/colour-contrast-analyser-firefox-
extension.php
Figura 35.Juicy Studio Contrast Analyser Firefox
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 26

27. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 36. Ejemplo de contrastes
3.3. DESTELLOS, PARPADEOS Y MOVIMIENTO
Una pantalla parpadeante o con destello puede provocar ataques en usuarios con epilepsia
foto sensitiva; por eso, los desarrolladores deben evitar causar destello de la pantalla.
Esta premisa es extensible al las imágenes animadas teniendo en cuenta los siguientes
puntos a revisar:
• No deben contener destellos.
• La frecuencia de parpadeo no debe oscilar entre 4 y los 59 destellos por segundo
(hertzios) y debe poseer un nivel máximo a los 20 destellos por segundo. Aunque no
se supere dicha frecuencia, el parpadeo debe parar automáticamente al cabo de un
tiempo determinado o permitir que los usuarios puedan detenerlo.
• Si existe movimiento, el bucle de reproducción debe ser finito y no muy extenso y
además si contiene información, ésta debe presentarse de forma íntegra al detener
el movimiento
Para la evaluación de la frecuencia de parpadeo para imágenes GIF animadas se puede
utilizar la opción GIF Flicker Test del menú Images de la barra Web Accessibility Toolbar.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 27

28. Instituto Nacional
de Tecnologías
de la Comunicación
Esta herramienta mide la frecuencia de cambio de las imágenes animadas. Hay que tener
en cuenta los umbrales de parpadeo y no considerar que todas las imágenes animadas son
parpadeantes o con destellos
Figura 37. GIF Flicker Test
Figura 38. Leyenda GIF Flicker Test
3.4. MARCADORES EN VEZ DE IMÁGENES PARA TRANSMITIR
INFORMACIÓN
No se deben utilizar imágenes para transmitir información cuando ésta se puede representar
mediante (X)HTML+CSS.
El uso de etiquetas (y hojas de estilo) donde sea posible, mejor que imágenes, promueve la
accesibilidad por las siguientes razones:
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 28

29. Instituto Nacional
de Tecnologías
de la Comunicación
• El texto se puede redimensionar y es interpretado por los productos de apoyo como
los lectores de pantalla.
• Los mecanismos de búsqueda pueden usar la información del texto.
Es habitual el uso de imágenes para proporcionar información textual que se debería
transmitir mediante texto, como por ejemplo en encabezados, tablas de datos o menús de
navegación. En ocasiones se emplean imágenes incluso para parte del propio contenido
textual de los documentos.
Este uso de las imágenes debe evitarse, con las siguientes excepciones:
• Logotipos e imágenes promocionales.
• Encabezados que requieran usar tipografías no reproducibles mediante (X)HTML y
CSS.
La evaluación de este punto es totalmente manual, no existiendo herramientas que realicen
o faciliten esta tarea.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 29

30. Instituto Nacional
de Tecnologías
de la Comunicación
4. VALIDACIÓN DE MAPAS DE IMAGEN
Un mapa de imagen es una imagen en la que determinadas zonas (áreas) son enlaces.
Existen dos tipos de mapas de imágenes:
Los mapas de imagen de cliente: toda la información necesaria está contenida en la página
y por tanto el navegador es capaz de realizar la acción.
Los mapas de imágenes de servidor: en ellos, el navegador envía la posición del ratón al
servidor y es el servidor el que evalúa y realiza la acción.
Como todo elemento no textual, para todo mapa de imagen se debe proporcionar una
alternativa equivalente al mismo tal y como se describió en el apartado "Equivalentes
textuales". Además, si se trata de un mapa de imagen de cliente, debe llevar un texto
alternativo para cada región activa del mismo (atributo alt del elemento AREA) que describa
el destino de los enlaces.
Ejemplo de código mapa de cliente:
<map id="Mapa" name="Mapa">
<area alt="Descripción del enlace del Área 1"
href="pagina.html" shape="rect" coords="0,10,5,25" />
<area alt="Descripción del enlace del Área 2"
href="pagina2.html" shape="poly" coords="…" />
[…]
</map>
<img src="../imagenes/MapaCCAA.gif" alt="Mapa de imagen XXXX”
usemap="#Mapa" />
En un mapa de imagen de servidor, el usuario no sabe cual es el destino de cada área del
mismo, por lo tanto deben replicarse los enlaces en formato texto de cada zona activa. Éstos
deben aparecer lo más cerca posible del mapa.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 30

31. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 39. Ejemplo de Mapa de imagen
Debido a la imposibilidad de hacer directamente accesible un mapa de imagen de servidor,
deberá ser sustituido, en la medida de lo posible, por un mapa de cliente, excepto cuándo
las zonas sensibles (áreas) no puedan ser definidas con una forma geométrica.
Para comprobar la accesibilidad en los mapas de imagen se ha de seguir los mismos
criterios para las imágenes desde el punto de vista de las alternativas.
En la barra Web Accessibility Toolbar existe una opción en el menú de Images que detalla
los mapas de imagen contenidos en la página.
Figura 40. Show Image Maps de la barra Web Accessibility Toolbar
Al acceder a dicha opción se mostrará una página que contendrá una lista de los mapas de
imagen empleados agrupados por tipología (servidor/cliente) con una imagen estática de
cada uno de ellos y el código de los mismos a continuación.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 31

32. Instituto Nacional
de Tecnologías
de la Comunicación
Figura 41. Ejemplo de la información mostrada de la opción Show Image Maps de la barra Web
Accessibility Toolbar
En el detalle del código se puede ver cuál es el texto alternativo empleado para cada zona
activa de los mapas de imagen de cliente y, por tanto, comprobar la adecuación de los
mismos.
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 32

33. Instituto Nacional
de Tecnologías
de la Comunicación
5. CONCLUSIONES
Para comprobar la accesibilidad del contenido Web basado en imágenes y mapas de
imagen se han de seguir las siguientes pautas generales:
• Revisar la existencia de textos alternativos con herramientas automáticas o
manuales.
• Revisar la adecuación de las alternativas con las opciones que nos proporcionan
herramientas como Web Accessibility Toolbar y Web Developer Toolbar.
• Comprobar que no se está empleando el color como medio único de transmisión de
la información y que el contraste es el adecuado.
• Comprobar que las imágenes animadas no contienen destellos y que se
proporciona un mecanismo de detención del movimiento o que el bucle de repetición
es finito.
• Comprobar que al utilizar una imagen en una página Web no existe un marcador
más apropiado para la tarea.
• Seleccionar en la medida de lo posible un mapa de imagen de cliente en vez de
servidor y revisar la adecuación de las alternativas a las áreas del mismo (en un
mapa de servidor, comprobar que se proporcionan enlaces redundantes).
Guías Prácticas de Comprobación de Accesibilidad - Imágenes 33